3

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

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

有什么方法可以让它顺利工作，不管用户有多迟钝以及它是超级响应的？

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

4

1 回答 1

0

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

工作示例

于 2012-09-13T07:48:15.127 回答