fadeInとfadeOutが十分に速く完了していない

Question

私は2つのdivを持っています。これは、fadeOutのコンテンツとfadeInの新しいコンテンツをクリックすると表示されます。両方のdivが非常に頻繁にクリックされるまで、コードは正常に機能します。これにより、両方の関数が実行され、前のコンテンツの下にロードされるコンテンツが消えてしまいます。

前の機能が完了するまで他のdivを起動できないようにすることが可能かどうか、またその逆も可能かどうか疑問に思っていました。

$('#div1').click(function(event){ 
    event.preventDefault(); 
    $('#lastWeek').fadeOut(function(){ 
     $('#thisWeek').fadeIn(); 
    }); 
}); 

$('#div2').click(function(event){ 
    event.preventDefault(); 
    $('#thisWeek').fadeOut(function(){ 
     $('#lastWeek').fadeIn(); 
    }); 
}); 

この上の任意の助けもいただければ幸いです:)

Answer 1

あなたはあまり物事を複雑にしたくない、これはあなたが必要なjQueryの行動への唯一の変更である場合は、最も簡単なのだろう何かが、オブジェクトがアニメーションを停止し、にジャンプすることを指示していることに影響するアニメーションの途中で発生したとき、あなたは何をすべきか通常

var whoIsAnimating = null; 

$('#div1').click(function(event){ 
    event.preventDefault(); 
    if (whoIsAnimating != null) { // or != 'div1', or == 'div2', take your pick 
     return; 
    } 
    whoIsAnimating = 'div1'; 
    $('#lastWeek').fadeOut(function(){ 
     $('#thisWeek').fadeIn(function() { 
      whoIsAnimating = null; 
     }); 
    }); 
}); 

$('#div2').click(function(event){ 
    event.preventDefault(); 
    if (whoIsAnimating != null) { // same here, depends on what you want 
     return; 
    } 
    whoIsAnimating = 'div2'; 
    $('#thisWeek').fadeOut(function(){ 
     $('#lastWeek').fadeIn(function() { 
      whoIsAnimating = null; 
     }); 
    }); 
}); 

Answer 2

：必要に応じて、両方のイベントハンドラをチェックし、修正することができるという状態変数を導入します完了した状態。これにより、2つの対話が同時に実行されるのを防ぎますが、依然としてユーザには望ましい最終状態が与えられます。

これはあなたが求めているものとはまったく異なります（まだアニメーション化されていればユーザーのクリックを無視するように求めましたが）、一般的にこれを行うより良い方法です。

jQuery .stop(true, true)メソッドを使用できます。あなたのコードでは、このようにそれを追加します。

$('#div1').click(function(event){ 
    event.preventDefault(); 
    $('#thisWeek').stop(true, true); 
    $('#lastWeek').stop(true, true).fadeOut(function(){ 
     $('#thisWeek').stop(true, true).fadeIn(); 
    }); 
}); 

$('#div2').click(function(event){ 
    event.preventDefault(); 
    $('#lastWeek').stop(true, true); 
    $('#thisWeek').stop(true, true).fadeOut(function(){ 
     $('#lastWeek').stop(true, true).fadeIn(); 
    }); 
}); 

だから、あなたがオブジェクトに新しいアニメーションを開始する時点で、.stop(true, true)は、他のすべてのアニメーションをクリアし、起動する前に、最終状態にジャンプ次のアニメーション。これにより、ある時点で2つのアニメーション（古いもの、まだ完了していないもの、新しいもの）が実行されなくなります。