fadeIn / fadeOut
要素をフェードイン／フェードアウトアニメーションさせるメソッド。
徐々に透明度を変化させ、
最後にdisplayプロパティの値をblock/none に変更する形でアニメーションを再現している。
書き方
jQueryObject.fadeIn();
jQueryObject.fadeOut();
// 第1引数にスピード , 第2引数にコールバック関数（アニメーションが完了した後に実行される処理）を指定できる
jQueryObject.fadeIn(スピード , コールバック関数);
サンプル
$('.className').fadeIn();
$('.className').fadeOut();
// スピードの指定
$('.className').fadeIn(1000);
$('.className').fadeIn('slow');
$('.className').fadeIn('fast');
// コールバック関数
$('.className').fadeIn(400 , function(){
//アニメーション終了後に実行される処理
alert('フェードイン完了');
});
第1引数（スピード）に指定出来るのは数値（ミリ秒）、'slow','fast'のいずれか。
それぞれの時間は下記の通り。
- (何も指定しない場合); 400ミリ秒
- ('slow'); 600ミリ秒
- ('fast'); 200ミリ秒
ドキュメント
- fadeIn([speed], [callback]) リファレンス
- fadeOut([speed], [callback]) リファレンス
- fadeTo(speed, opacity, [callback]) リファレンス
slideDown / slideUp
要素をスライドダウン／アップ アニメーションさせるメソッド。
要素のoverflowプロパティをhiddenの値に変更し、
入り切らない要素はカットする状態にする。
この際にpaddingプロパティの値は0にしている。
その上でheightプロパティの値を徐々に増減させてスライドダウン／アップを表現している。
そして最終的にdisplayプロパティの値を block / none に変更する事で、
スライドでの要素の表示／非表示を再現している。
書き方
jQueryObject.slideDown();
jQueryObject.slideUp();
// 第1引数にスピード , 第2引数にコールバック関数（アニメーションが完了した後に実行される処理）を指定できる
jQueryObject.slideDown(スピード , コールバック関数);
サンプル
$('.className').slideDown();
$('.className').slideUp();
// スピードの指定
$('.className').slideUp(1000);
$('.className').slideUp('slow');
$('.className').slideUp('fast');
// コールバック関数
$('.className').slideDown(400 , function(){
//アニメーション終了後に実行される処理
alert('スライドダウン完了');
});
第1引数（スピード）に指定出来るのは数値（ミリ秒）、'slow','fast'のいずれか。
それぞれの時間は下記の通り。
- (何も指定しない場合); 400ミリ秒
- ('slow'); 600ミリ秒
- ('fast'); 200ミリ秒
ドキュメント
- slideDown([speed], [callback]) リファレンス
- slideUp([speed], [callback]) リファレンス
- slideToggle([speed], [callback]) リファレンス
animate
要素をアニメーションさせるメソッド。
要素のoverflowプロパティをhiddenの値に変更し、
入り切らない要素はカットする状態にする。
（アニメーション終了後はoverflowプロパティの値は元に戻る）
任意のスタイル属性のプロパティと値を設定し、
独自のアニメーションを再現することができる。
ただし、使用できるcssのプロパティ名は、
数値型の値をとるモノのみに限定される。
（position: 'relative' などは使用できない）
書き方
jQueryObject.animate({
プロパティ : 値
});
// 第1引数にcssのプロパティと値 , 第2引数にスピード , 第3引数にコールバック関数を指定できる
jQueryObject.animate({
プロパティ : 値
}, スピード);
jQueryObject.animate({
プロパティ : 値
}, スピード , コールバック関数);
サンプル
$('.className').animate({
top : 500,
left : 600
},3000);
// コールバック関数
$('.className').animate({
top : 500,
left : 600
},3000 , function () {
alert('アニメーション完了')
});
第2引数（スピード）に指定出来るのは数値（ミリ秒）、'slow','fast'のいずれか。
それぞれの時間は下記の通り。
- (何も指定しない場合); 400ミリ秒
- ('slow'); 600ミリ秒
- ('fast'); 200ミリ秒