アニメーションが終了した後にイベントを停止して復帰しました。

Question

3つの非常に良い投稿が検索されて見つかりましたが、すべてがクリックではなくアニメーション化されていました。 ）、stop（true、true）、event.stopPropagation（）はうまく動作しないかもしれません。したがって、私の質問。

私は、（何らかの理由で）click-happyノブを使用して、利用可能なすべてのリンクを4番目と5番目に速くクリックし、スライダのdiv/imageの位置を計算するのに使用する数学をねじ込みます。アニメーションが停止すると、イメージはオフキルティングになるので、「OK、何かがクリックされ、適切なイメージが表示されるまで他のクリックを許可しない」と言うべき箇所を理解する必要があります。

また、私がやっていることと私が見つけたことの違いは、アニメーションの呼び出しがクリックの直後ではなく、クリックが計算をして別の関数。

私はこれを持っている：

$('#navs li').click(function() { 
    var currentLocationNum = $('li.cs_current').index(); 
    var stepClicked = $(this).index(); 
    if (stepClicked == currentLocationNum) 
     { return false; 
     } 
     else { 
      var lftEdgeNx = $('.slidingChartHolder').position().left; 
      var newLeftEdge = (stepClicked - currentLocationNum) * imageWidth;    
      moveMaster(lftEdgeNx + newLeftEdge, stepClicked); 
     } 
    }); 

と移動機能：いくつかの洞察力のための

function moveMaster(leftEdge, newcs_current) { 
    $('.slidingChartHolder').fadeTo(200, .2).animate({ 
     left: leftEdge 
    }, "fast").fadeTo(200, 1); 
    $('li.cs_current').removeClass('cs_current') 
    $('li:eq('+newcs_current+')').addClass('cs_current'); 

     if ($('li.cs_current').index() === 0) { 
      $('#previous').addClass('hideMe'); 
      $('#next').removeClass('hideMe'); 
     } else if ($('li.cs_current').index()==4){ 
      $('#previous').removeClass('hideMe'); 
      $('#next').addClass('hideMe'); 
        } 
     else { 
      $('#previous').removeClass('hideMe'); 
      $('#next').removeClass('hideMe'); 
     } 
     } 

感謝を！

Answer 1

私は「どこかでクリックしましたが、適切な画像が表示されるまで他のクリックを許可しないでください」という言葉を理解する必要があります。

私は簡単な解決策は、あなたが進行中のアニメーションがあるかどうかをテストすることができますされ、jQueryの:animated selectorを利用することだと思います。これを行うことができます：

$('#navs li').click(function() { 
    if ($(".slidingChartHolder").filter(":animated").length > 0) 
     return; 

    // your existing click code here 
}); 

また、jQueryアニメーションメソッドを使用すると、アニメーションが終了すると実行されるコールバック関数を提供できます。したがって、アニメーションを開始するときに、進行中であることを示すフラグを設定し、そのフラグをコールバックからリセットすることができます。次に、このフラグをクリックしてテストし、アニメーションが既に実行中の場合は何もしません。だからあなたは次のようなことをすることができます：

var allowClick = true; 

$('#navs li').click(function() { 
    if (!allowClick) 
     return; 

    // your existing click code here 
}); 

function moveMaster(leftEdge, newcs_current) { 
    allowClick = false; 
    $('.slidingChartHolder').fadeTo(200, .2).animate({ 
     left: leftEdge 
    }, "fast").fadeTo(200, 1, function() { 
     allowClick = true; 
    }); 

    // your existing add/remove class code here, noting that 
    // adding and removing classes doesn't happen on the animation queue 
}