セレクタで選択した要素のCSSプロパティの値をアニメーションさせることができる。
$("セレクタ").animate(①変化後のcssプロパティ , ②スピード , ③イージング , ④コールバック関数);
$("#list").animate({left:"+=20px"},500);
①{“CSSプロパティ名” : “値”}で記述。
②”slow”、”normal”、”fast”のいずれか、または単位をミリ秒で指定。
③アニメーションの変化の仕方を定義する。”linear”と”swing”のどちらかを指定。初期値は”swing”。”linear”は直線的、”swing”ははずむように変化する。
②③④は省略可能。
※CSSプロパティ名が英数字とアンダースコアのとき、また、値が数字のとき、ダブルクオートを省略することができる。
※「animate」メソッドの値には、相対指定(+=や-=)を使うことができる。
アニメーション関連のメソッド
fadeTo()メソッド
透明度のアニメーションは「fadeTo」メソッドで簡略化できる。
$("セレクタ").fadeTo(スピード , 不透明度 , コールバック関数);
/* $("セレクタ").animate({"opacity":不透明度} , スピード , コールバック関数);と同じ意味。 */
$("#list").fadeTo(500 , 1);
delay()メソッド
その名の通り「遅らせる」という意味のメソッド。
delay(遅延させるミリ秒);
/* <div>要素が左方向へ0.5秒かけて100px動き、1秒止まって、その後下方向へ0.5秒かけて100px動いて、
最後1秒かけて消えていく。 */
$("div")
.animate({left:"100px"},500)
.delay(1000)
.animate({top:"100px"},500)
.hide(1000);