Javascript 如何为jQuery淡出添加延迟？

我正在为一个站点设计一个导航栏，我正在尝试弄清楚如何在光标离开选项卡后使每个选项卡显示的子菜单保持可见。因为它在光标离开后立即消失，所以我无法在子菜单上设置函数。因此，我试图在jQuery中的.hover的外侧引入一个setTimeout（），但没有成功。代码如下：

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

---

这个设置缺少什么？

您是否尝试过让它在悬停时显示（），然后在鼠标退出时淡出（“慢”）

或者，你也可以。动画（{opacity:0}，3000）或者w/e数量对你有用

再编辑一次：

您可以使用.animate（{opacity:1}，3000），它只会将一个已经可见的元素延迟3秒

摘自：

下面是一个简单的片段：

JQuery

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

---

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

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

内部函数中的“this”设置为调用超时的对象，即

窗口

，而不是hovernav的当前实例

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

这个
值

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

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

注意：如果鼠标返回悬停导航，您可能需要更多的逻辑来取消隐藏子导航。否则，除了一个恼人的菜单栏在鼠标离开时一直关闭之外，如果你在两秒钟前鼠标离开，你还有一个更恼人的菜单栏，即使你在鼠标悬停时也会一直关闭菜单。
Nope-因为我可以将setTimeout（）移动到tabHideSubnav函数内部，它根本不起作用-没有延迟，不褪色。我不确定是否可以从setTimeout（）内部调用jQuery。出于某种原因，我也无法让jQuery插件处理这个问题。然后将jQuery的内容包装到另一个函数中，只需将解析元素所需的信息传递给它即可。在匿名函数内部，可以收集解析元素所需的任何信息，这就是传递给包装器函数的信息