セレクタで指定した要素をアニメーションさせたい時に使用する。
$("セレクタ").アニメーション();アニメーションメソッド一覧
| アニメーション | 意味 | displayの値 |
|---|---|---|
| show | 表示する | block |
| hide | 非表示にする | none |
| toggle | 選択した要素が表示されている場合はhideによって非表示にし、非表示の場合は、showによって表示する | |
| slideDown | スライドが下がってくるように表示する | block |
| slideUp | スライドが上がるように非表示にする | none |
| slideToggle | 選択した要素が表示されている場合はslideUpによって非表示にし、非表示の場合は、slideDownによって表示する | |
| fadeIn | 透明度を上げて表示する | block |
| fadeOut | 透明度を下げて非表示にする | none |
| fadeToggle | 選択した要素が表示されている場合はfadeOutによって非表示にし、非表示の場合は、fadeInによって表示する |
アニメーションのスピード変更
スピードは、”slow”、”normal”、”fast”のいずれか、または単位をミリ秒で指定する。
$("セレクタ").アニメーション(スピード);コールバック関数
アニメーションが完了した時に実行したい内容を記述する。
$("セレクタ").アニメーション(スピード,function(){
～アニメーションが完了した時の操作～
});
$("#list").slideToggle(1000,function(){
alert("アニメーション完了！");
});