JavaScript
jQuery

[jQuery] アニメーションさせるメソッド

More than 1 year has passed since last update.

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ミリ秒

ドキュメント

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ミリ秒

ドキュメント

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ミリ秒

ドキュメント

参考ドキュメント