jQueryのanimate()でアニメーションを適用する方法

今回、jQueryのanimate()メソッドを使い、要素にアニメーション効果をいくつか設定してみました。

指定位置へ移動

移動時間を2000msに指定し、300pxの位置へ移動します。

$("#samplebtn").click(function(){
$("#sample").animate({"left" : "300px"}, 2000);
});

click reset

fast指定

移動時間を数値ではなく、fastと指定してみました。

$("#samplebtn").click(function(){
$("#sample").animate({"left" : "300px"}, fast);
});

click reset

現在の位置から移動

クリックのごとに300px移動します。

$("#samplebtn").click(function(){
$("#sample").animate({"left" : "+=300px"}, "slow");
});

click reset

向き変更

右側から左側へ移動方向を変更してみました。

$("#samplebtn").click(function(){
$("#sample").animate({"left" : "-=300px"}, "slow");
});

click reset

サイズ変更

幅を大きくします。

$("#samplebtn").click(function(){
$("#sample").animate({width: "70%"}, "slow");
});

click reset

単純なアニメーションですが、画像に動きをつけることができました。他にもいろいろプロパティがありそうなので、使っていきたいですね。