[JS]jQueryのアニメーション機能をスムーズに動作させるためのスタディ

jQueryでアニメーション機能を実装する際に使用する「.animate()」のスタディをCSS-Tricksから紹介します。

デモのキャプチャ

Fully Executing jQuery Animations Without Queuing
demo

デモでは、マウスのホバーをトリガーにアニメーションが始まり、そのアニメーションを止める際に「.stop()」または同様の機能をもつものをそれぞれ比較しています。

ゴールは、三つに並んだバーがそれぞれ期待通りによりスムーズに動くことです。

最もスムーズに動作するのは、デモページの下にあるグリーンのデモで下記のように記述しています。

JavaScript

sponsors

top of page

©2018 coliss