キュー、遅延、停止キュー

Question

現在、タブ付きの2レベルメニューアニメーションを作成中です：メインメニューのタブ項目はタブ付きサブメニューを開きます。

ロード時に、現在のページの場所に応じて、デフォルトのサブメニューが開きます。ユーザはナビゲーションをブラウズするために他のサブメヌヌを開くことを選択することができる。 しかし、ユーザーがメニューを気にしなくても、デフォルトのサブメニューはしばらくしてから現在の場所と一致するように再表示されます。 このコードはこの用途で正しく動作します。

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

ここが問題です。タイムアウトが開始された後（2秒後）にメニューに戻ると、デフォルトのサブメニューが表示され、ユーザーエクスペリエンスが阻害される可能性があります。 ユーザーがメニューに戻ったときにタイムアウトを停止するとよいでしょう。

あなたの助けを

おかげで...私はキュー、ディレイを使用する方が良いと思います...しかし、ドキュメントのほとんどはアニメーションキューイングを参照するので、私はそれを行う方法がわかりません。.. 。

Answer 1

あなたがそうのような、てclearTimeoutで起動タイムアウトを停止することができます：

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

Answer 2

は、あなたは本当にマウスがメニューに入ったときにタイマーをキャンセルするためにキューを使用する必要はありません。あなたはそれを行うために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"); 
    } 
});