隊列，延遲，停止隊列

我目前正在製作帶有選項卡的兩級菜單動畫：主菜單選項卡項目打開選項卡式子菜單。隊列，延遲，停止隊列

加載時，根據當前頁面位置打開默認子菜單。用戶可以選擇打開其他子菜單瀏覽導航。但是，當用戶不再關心菜單時，默認子菜單會在一段時間後重新出現以匹配當前位置。此代碼適用於此用途：

$("#menu").mouseleave(function(){ 
    setTimeout(function(){ 
     $("#menu").tabs("option", "selected", index);}, 
     2000); 
     }); 
    });

這是問題所在。如果用戶在啓動超時（延遲2秒）後回到菜單中，則無論如何都會出現默認子菜單，這可能會影響用戶體驗。當用戶回到菜單時，停止超時會很好。

我認爲這將是更好地使用隊列，延遲...但我不知道如何，因爲大多數的文件是指動畫排隊做...

感謝您的幫助.. 。

來源

2011-01-25 Yako

您可以停止啓動暫停時以clearTimeout，就像這樣：

var menuTimeOut; 
$("#menu").mouseleave(function(){ 
menuTimeOut = setTimeout(function(){ 
    $("#menu").tabs("option", "selected", index);}, 
    2000); 
    }); 
}); 
$("#menu").mouseenter(function(){ 
    if(menuTimeOut) { 
    clearTimeout(menuTimeOut); 
    } 
});

來源

2011-01-25 12:09:11

謝謝您的回答！ – Yako 2011-01-27 09:53:03

感謝您的回答！但mouseenter事件似乎並沒有奏效。我不知道爲什麼...... – Yako 2011-01-27 10:14:08

你並不真的需要使用隊列，當鼠標進入菜單取消計時器。您可以撥打clearTimeout()做到這一點，並使用jQuery的data()設施存儲的超時標識：

$("#menu").mouseleave(function() { 
    $(this).data("timeout", window.setTimeout(function() { 
     $("#menu").tabs("option", "selected", index); 
    }, 2000)); 
}).mouseenter(function() { 
    var timeout = $(this).data("timeout"); 
    if (timeout) { 
     window.clearTimeout(timeout); 
     $(this).removeData("timeout"); 
    } 
});

來源

2011-01-25 12:10:25

隊列，延遲，停止隊列

回答

相關問題