如何使用平滑（导航栏）正确编程 jQuery 动画答案

【问题标题】：How to correctly program a jQuery animate with smoothing (navigation bar)如何使用平滑（导航栏）正确编程 jQuery 动画
【发布时间】：2012-09-06 05:36:59
【问题描述】：

我有一个向下滑动的导航栏，非常简单，完成后，一条像素大小的小线穿过它以分隔子页面。

当您将鼠标快速悬停在它上面时，它往往会保持可见。正如您从过滤器和停止功能中看到的那样，我不希望发生任何跳跃的事情 - 让所有这些都非常顺利。

有没有什么方法可以让它顺利运行，不管用户有多迟钝以及它的反应超级灵敏？

$(".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/

【问题讨论】：

Titanium，请在 jsFiddle 上发布您的示例！

标签： javascript jquery navigation smoothing

【解决方案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);
});

Working Example

【讨论】：