jQuery delay doesn't work as expected

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 continu开发者_高级运维ing. 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

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

http://jsfiddle.net/LZ8yt/

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

You can always go lo-tech with setTimeout.

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