ボタンがあり、hoverでアニメーション実行を実装すると、連打されたりすると、何もしてなくても、その後に動作がどんどん繰り返される。原因はアニメーション動作は、全てqueue(キュー)に溜まるので、動作中に新たに溜まった動作を全ての動作が完了するまで実行し続ける為。
$(‘.box01’).stop(true).slideUp(400, ‘easeOutCubic’);などと指定する。
@See http://jsdo.it/ksk1015/jfkH
実装したかったのは#demo4の奴。
【#demo1】
animateのみだと
マウスをのっけるはずすを繰り返すと
アニメーションキューはどんどんたまっていって
マウスを外した後もたまったアニメーションが繰り返される。
mouseover時のみにstop()すればいいかというと
これだけだと実行中のアニメーションが停止するだけで
#demo1と同じ現象が起こる。
で、stop()は二つの引数を指定できて、
第一引数はたまっているキューを削除するかしないかで
mouseover時にstop(true)を指定すると
アニメーションキューは貯まらずに
すぐにmouseoutしても、
mouseover時のアニメーションを最後までしてくれるものが作れる。