ボタンをクリックした後にアニメーションを停止する

Question

私は、上記の画像を制御するボタンが2つあり、基本的に順方向または逆方向に画像を変更します。次のように私のコードです：

slider.fadeOut(400, function() { 
    $(this).attr('src', images[index]); 
    }).fadeIn(400); 
    console.log(index); 
}); 

を問題があれば、私は、複数のボタンのクリック、画像の変化を持っているということですが、私のフェードアニメーションは、画像を変更するだけではなく、一度、後に何度も同じように行われます。

現在のアニメーションを停止し、次のイメージをフェードインする方法はありますか？私はちょうどボタンのクリック数を増やしたくないし、5つのフェードインを好きです。

Answer 1

これを実現するにはstop()メソッドを使用できます。最初のパラメータとしてtrueを指定すると、後続のアニメーションのキューもクリアされます。これは、誰かが繰り返し親イベントをトリガした場合に便利です。これを試してみてください：

slider.stop(true).fadeOut(400, function() { 
    $(this).attr('src', images[index]); 
}).fadeIn(400); 

http://api.jquery.com/stop