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

Working Example

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

1 个答案: