animate()

このエントリーをはてなブックマークに追加

animateメソッドはアニメーションを制御するメソッドです。

animate( properties [, duration] [, easing] [, complete] )

propertiesには変更したいCSSの値をオブジェクトで、durationにはアニメーションの速度をms単位で記述します。durationには『slow』や『fast』といったキーワードを指定することも可能です。easingには動きを設定でき”linear (一定)”と”swing(最後になめらかになる)”が指定できます。completeにはアニメーション終了時のコールバック関数が指定できます。

次のサンプルでは#boxのleftプロパティを1秒かけて400pxの位置まで一定速度で移動させアニメーション終了後にalert()を表示しています。

$('#box').animate({
	left:400
},1000,"linear",function(){
	alert("ok");
});

sample

animate()でアニメーションできるのはwidthやheight、leftといった数値を指定できるプロパティのみです。色に関しては「jQuery Colorプラグイン」などを利用することでアニメーションさせることも可能です。値に関しては数値を指定した場合、ピクセルとして扱われますが、emや%といった値の指定も可能です。

CSSプロパティ以外にも「scrollTop」や「scrollLeft」といった特別な値を指定することも可能です。

fontプロパティやbackgroundプロパティ、borderプロパティなどのショートハンド記述のサポートはよくありません。たとえばborderプロパティを指定する場合には他のスタイルをauto以外で事前に指定しておく必要があります。fontプロパティも”fontSize”や”font-size”で指定する必要があります。

jQuery 1.0.0での追加/変更

aniamte()はjQuery 1.0で定義されたメソッドです。

参考URL

.animate() | jQuery API Documentation

登録日 : 2012年09月12日 最終更新日 : 2012年9月12日

同じカテゴリー(Effects)のエントリー

検索

スポンサードリンク

バージョン

リファレンス