如何添加延遲到jQuery淡出？

Question

我正在為網站設計一個導航欄，並且試圖弄清楚如何使每個選項卡上出現的子菜單在光標離開選項卡后保持可見。 由於它會在光標離開后立即消失，因此我無法在子菜單上設置功能。 所以我想做的是將setTimeout（）引入jQuery中.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不必每次都從字符串中重新編譯函數。將代碼放入字符串中幾乎總是偽造的。）

請注意，如果鼠標移回懸停導航，您可能需要更多邏輯來取消hide-subnav。 否則，您會得到一個更煩人的菜單欄，該菜單欄即使在鼠標懸停時仍會關閉，而不是在鼠標離開時會一直關閉，這是令人討厭的菜單欄，如果您在兩秒鍾前將鼠標移出。

Answer 2

您是否嘗試過將鼠標懸停在show（）上，然后在鼠標懸停上使其淡出（'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”可能超出范圍。