Question

我正在为一个网站设计一个导航栏，我正试图找出如何在光标离开标签后让每个标签显示的子菜单保持可见状态。由于它在光标离开后立即淡出，我无法在子菜单上设置功能。所以我要做的是在jQuery中将.Timeout（）引入.hover的外侧，但没有成功。这是代码：

$('.hovernav').hover(
        function () {
            $(this).css('background-image', $(this).css('background-image').replace("_o.", "_i."));
            tabShowSubnav($(this).attr('id'));
        }, 
        function () {
            $(this).css('background-image', $(this).css('background-image').replace("_i.", "_o."));
            setTimeout('tabHideSubnav($(this).attr("id"))','2000');
        });

我对此设置缺少什么？

Answer 1

function () {
    ....
    setTimeout('tabHideSubnav($(this).attr("id"))','2000');
}

内部函数中的

'this'设置为对象调用超时，即window，而不是当前的hovernav实例。

最好不要使用带有setTimeout的字符串;使用函数代替。然后，您可以访问封闭范围中的变量，您可以使用它来记住传递给外部函数的this值。

function() {
    ...
    var thisid= this.id;
    setTimeout(function() {
        tabHideSubnav(thisid);
    }, 2000);
}

（作为奖励，这会阻止JavaScript每次都必须从字符串重新编译函数。将代码放入字符串几乎总是假的。）

请注意，如果鼠标返回到hovernav，您可能需要更多逻辑来取消hide-subnav。否则，当鼠标离开时，不是一个令人讨厌的菜单栏，而是一个令人烦恼的菜单栏，你有一个更烦人的菜单栏，即使在你徘徊它的时候也会关闭菜单，如果你在两秒钟之前徘徊。

Answer 2

您是否尝试在悬停时显示show（），然后在mouseout上使用fadeOut（'slow'）？

http://docs.jquery.com/Effects/fadeOut

另外，你可以.animate（{opacity：0}，3000）或w / e金额适合你。

再一次编辑：

你可以使用.animate（{opacity：1}，3000），只会将已经可见的元素延迟3秒钟。

取自：http://www.learningjquery.com/2007/01/effect-delay-trick

这是一个简单的代码段：

JQuery的

    $(function(){
        $("#HeaderMenu").mouseover(function(){           
            $("#SubMenu").show();
         });
        $("#HeaderMenu").mouseout(function(){
                $("#SubMenu").animate({opacity: 1}, 3000, function(){$(this).hide()});
    });

Answer 3

这里只是猜测，但是当函数被调用时，“this”可能超出了范围。

如何为jQuery淡出添加延迟？

3 个答案: