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);