How to correctly program a jQuery animate with smoothing (navigation bar)

Question

I have a navigation bar that slides down, very easy, and when that's complete, a small pixel sized line goes across it all to separate sub pages.

When you hover your mouse over it very quickly, it tends to stay visible. As you can see from the filter and stop functions, I don't want any jumpy things happening - it would be great for all of it to be really smooth.

Is there any way of getting this to work smoothly, regardless how retarded the user is as well as it being super responsive?

$(".menu").hover(function() {
    $(".children").filter(':hidden').slideDown(300, function() {
        $(".menu-line").stop(true, false).animate({ width: "903px" });
    });
}, function() {
    $(".menu-line").stop(true, false).animate({ width: "0px" }, function() {
        $(".children").slideUp(300);
    });
});

Working example: http://jsfiddle.net/varFS/

Answer 1

Titanium, you must use timeout for hiding your menu to get desired result:

$(".children").css("padding-top", "21px").hide();
$(".menu").hover(function() {
    $(".children").filter(':hidden').slideDown(300, function() {
        $(".menu-line").stop(true, false).animate({
            width: "400px"
        });
    });
}, function() {
    setTimeout(function() {
        if (!$(".menu, .menu ul, .menu ul li").is(':focus')) {
            $(".children").css("padding-top", "21px").hide();
        }
        $(".menu-line").stop(true, false).animate({
            width: "0px"
        }, function() {
            $(".children").slideUp(300);
        });
    }, 400);
});​

Working Example