[JS]jQueryのアニメーション機能をスムーズに動作させるためのスタディ
Post on:2009年12月17日
sponsors
jQueryでアニメーション機能を実装する際に使用する「.animate()」のスタディをCSS-Tricksから紹介します。
Fully Executing jQuery Animations Without Queuing
demo
デモでは、マウスのホバーをトリガーにアニメーションが始まり、そのアニメーションを止める際に「.stop()」または同様の機能をもつものをそれぞれ比較しています。
ゴールは、三つに並んだバーがそれぞれ期待通りによりスムーズに動くことです。
最もスムーズに動作するのは、デモページの下にあるグリーンのデモで下記のように記述しています。
JavaScript
|
1 2 3 4 5 6 7 |
<textarea name="code" class="js" cols="60" rows="5"> $("#animate-test div").hover(function(){ $(this).filter(':not(:animated)').animate({ width: "200px" }); }, function() { $(this).animate({ width: "100px" }); }); </textarea> |
sponsors
