NO IMAGE

jQuay アニメーション連打の対応

ボタンがあり、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時のアニメーションを最後までしてくれるものが作れる。

NO IMAGE
最新情報をチェックしよう!

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 37

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 38

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 39

  • Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 83

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 84

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 85
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「   」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG