jQuery delay doesn't work as expected

Question

I have the following jQuery code

$("#dropdown").hover(function() { 
        $(this).stop(true,true).fadeTo('fast',1);
        $("#options").stop(true,true).slideDown();
    }, function() { 
        $(this).delay(1000).stop(true,true).fadeTo('fast',0.1);
        $("#options").delay(1000).stop(true,true).slideUp();
    }
);

What I expect to happen is when the mouse leaves #dropdown it will wait 1 second before continuing. This is not happening.

What I am trying to achieve, in case there is a better way, is to leave the drop down menu visible for a second or two after moving your mouse and I would also like to prevent the events from happening again to prevent artifacts and "funnies" if you were to move the mouse over and out from the div very quickly

Answer 1

You can always go lo-tech with setTimeout.

var dropDownElement = $(this);
setTimeout(function()
{
    dropDownElement.fadeTo('fast', 0.1);
    // Other Code
}, 1000);

Answer 2

Your calls to stop aren't placed on the animation queue - they run immediately. I'm not sure whether you really need them in the "hover out" routine.

edit removed dumbness

Answer 3

The problem is .stop(). If you take that out it works:

http://jsfiddle.net/LZ8yt/