0

これらのコードを含む2つのボタンがあります:

$('#btn1').on('click',function() {
   $('#div1').animate({left:500},1000);
});

$('#btn2').on('click',function() {
   $('#div1').animate({left:0},1000);
});

btn1 のイベントがまだ進行中である間に、btn2 のイベントを起動できるようにしたいと考えています。両方のボタンをすばやくクリックしたときに現在起こっていることは、たとえば、btn1 をクリックすると、実際に btn2 のイベントを発生させる前に、div が left:500 に移動して完了します。

何か案は？

4

2 に答える 2

2

.stop()新しいアニメーションを起動する前に、すべてのアニメーションを実行したい。

于 2012-06-26T10:35:35.417 に答える
1

これを行うには、stop() 関数を使用する必要があります。両方のイベント ハンドラーを次のように設計します。

$('#btn1').on('click',function() {
  $('#div1').stop().animate({left:500},1000);
});

$('#btn2').on('click',function() {
  $('#div1').stop()animate({left:0},1000);
});

これにより、現在アニメーション化されている場合は div が停止し、新しいアニメーションが開始されます。

于 2012-06-26T10:38:47.923 に答える