如何正确编程jQuery动画与平滑(导航栏)

Question

我有一个向下滑动的导航栏，非常容易，完成后，一条像素大小的小线会穿过所有导航栏，将子页面分隔开。

当你很快将鼠标悬停在它上面时，它往往会保持可见。正如你从过滤器和停止功能中看到的那样，我不希望发生任何不稳定的事情——如果所有这些都非常顺利，那就太好了。

有没有什么方法可以让它顺利工作，不管用户有多迟钝，也不管它有多灵敏？

$(".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);
    });
});

工作示例：http://jsfiddle.net/varFS/

Answer 1

Titanium，您必须使用超时来隐藏菜单以获得所需结果：

$(".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);
});​

工作示例