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");
});
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日