Question

I have this script:

$("#menu ul li").mouseover(
    function () {
        $(this).find(".submenu").fadeIn("slow");
    }
);

var timer = 0;
function animate_me() {
    $(this).find(".submenu").stop().fadeOut("slow");
}
$(function(){
    $("#menu ul li").mouseout(function(){
        timer = setTimeout("animate_me()", 300); // start timer when mouse is moved in
    }, function() {
        clearTimeout(timer); // stop it if mouse is moved out
    });
});

How do i delay the fadeout until menu ul li has been moused off for two seconds?

Answer 1

Fist of all, mouseout, takes only one parameter. You need to use .hover() if you want to use it this way. Then you could just use .dealy() to achieve your goal, .stop(true,true) clears that delay

here is a demo:
http://jsfiddle.net/meo/zTTFJ/