ユーザーが新しいタブをクリックするとループが途切れる - jQueryのタブ

Question

私は自分のウェブサイトのタブ付きナビゲーションに取り組んでおり、修正したい問題があります。

私は一日中私の頭をスクランブルしていて、どこにもいませんでした。本当に助けに感謝します。 http://jsfiddle.net/EghAt/

1）お知らせあなたがタブ1をクリックしてすぐに、2]タブをクリックしタブ1がループにすべての結果を出し続けて：ここで

はコードです。 これがループを停止した場合は、私は好きですタブ1結果とループを開始したばかりですタブ2結果。

これは可能ですか？

どうすればよいですか？任意のポインタ

Answer 1

ため

多くのおかげであなたが追加することによって、あなたのこの機能では、以前のアニメーションを停止することができます.stop(true, true)あなたはこの改訂版の関数で参照してください。あなたが上でこれを呼び出すので

function fadeOutItems(ele, delay) { 
    var $$ = $(ele), $n = $$.next(); 

    // Toggle the active class 
    $$.toggleClass('active'); 

    // Ensure the next element exists and has the correct nodeType 
    // of an unordered list aka "UL" 
    if ($n.length && $n[0].nodeName === 'UL') { 
     $('li', $n).each(function(i) { 
      // Determine whether to use a fade effect or a very quick 
      // sliding effect 
      delay ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideToggle('fast'); 
     }); 
    } 
} 

両方現在アクティブなタブと新しくアクティブなタブがある場合、現在アクティブなタブで進行中のアニメーションをすべて停止する必要があります。

詳細については、.stop()のjQueryドキュメントを参照してください。

さらにこのコードを見ると、文字通りあなたの質問に答えることができます（以前のタブのループを止めて次のタブを開始します）。しかし、部分的にのみ展開されたタブの項目を残します。それがあなたの望むものなら、それはそうするでしょう。

もしそれがあなたの望むものでなければ、現在実行中のアニメーションを停止するだけでなく、古いタブのすべてのアイテムを同じ状態にするために、コードをさらに修正する必要があります。

私が疑ったように、実際にあなたが求めた以上のもの（最新のコメントごと）が必要です。以前の状態に関係なく、以前の項目を非表示にします。このコードを使って、slideToggle()をslideUp()に変更しました。アニメーションがまだ開始されていない場合は、トグルが間違った方向に移動するため、トグルの形式を使用することはできません（状態を逆転させるだけです）。代わりに、非表示になっているアイテムで終わる最終的なアニメーションを使用する必要があります。あなたは、私がslideUp()を使用し、このコードを使用することができますが、あなたが望んでいた場合は、別の何かを選ぶことができます：http://jsfiddle.net/jfriend00/rzd3N/：あなたがここにアクションでそれを見ることができます

// A helper function that allows multiple LI elements to be either 
// faded in or out or slide toggled up and down 
function fadeOutItems(ele, show) { 
    var $$ = $(ele), $n = $$.next(); 

    // Toggle the active class 
    $$.toggleClass('active'); 

    // Ensure the next element exists and has the correct nodeType 
    // of an unordered list aka "UL" 
    if ($n.length && $n[0].nodeName === 'UL') { 
     $('li', $n).each(function(i) { 
      // Determine whether to use a fade effect or a very quick 
      // sliding effect 
      show ? $(this).stop(true, true).delay(i * 400).fadeToggle('slow') : $(this).stop(true, true).slideUp('fast'); 
     }); 
    } 
} 

。

Answer 2

問題はこちらです。

$(this).delay(i * 400).fadeToggle('slow') 

遅れを増やして、各要素に同時にフェード効果を与えています。

このようにするのは簡単ではありません。これを行う正しい方法は、一度に要素を消すだけの関数を呼び出すことです。その後、この関数は一定の時間間隔（あなたの場合は400）で再び実行され、次の要素をフェードします。

このように、関数に変数を渡すと、たとえばstopExecuting=trueのように、効果が停止します。

これを実現するにはsetIntervalとsetTimeoutをご覧ください。