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

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

Fully Executing jQuery Animations Without Queuing
demo

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

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

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

JavaScript

$("#animate-test div").hover(function(){
    $(this).filter(':not(:animated)').animate({ width: "200px" });
}, function() {
    $(this).animate({ width: "100px" });
});

Post on:2009年12月17日