animate()メソッド

animate()メソッドは、指定した要素のCSSプロパティの値を アニメーションのように徐々に変化させていきます。

但し指定可能なCSSプロパティは、数値で表せるものに限定されます。 例をあげると、top、left、width、opacity、font-size、 margin、padding等です。これらの値は「px、em、%」で表すことができます。

一方でcolor、backgroundのような数値で表せないCSSプロパティは指定することができません。

書式


$(セレクタ).animate(CSSプロパティ, スピード, 動き, コールバック関数);

コード例

// 1秒指定
$('#div1').animate({'left': '200px'}, 1000);

// 'fast', 'linear'
$('#div1').animate({'left': '200px'}, 'fast', 'linear');

// 複数プロパティを別に設定する(可読性が高くなる)
var obj = {
    'left': '200px',
    'top' : '200px'
};
$('#div1').animate(obj, 1000);

// コールバック関数を記述
$('#div1').animate({'left': '200px'}, 'slow', function(){
    // animate()後の処理
});

引数について

CSSプロパティの指定方法

早速、具体例を見てみます。CSSのプロパティ名と値の指定方法に注目してください。


$('#div1').animate({
	'top': '200px',
	'left': '400px'
}, 1000) ;

CSSのプロパティ名と値の書式は次のようになります。


// 1つの場合
{プロパティ名: 値} 

// 複数の場合はカンマで区切る
{プロパティ名: 値, プロパティ名: 値}

複数指定する場合は複数行に分けて記述したほうが見やすくなります。

スピード

スピードはミリ秒単位で指定します。「1000」と指定した場合は1秒です。

数値以外では'slow'、'normal'、'fast' といった指定も可能です。 'slow'は0.6秒、'normal'は0.4秒、'fast'は0.2秒となります。 指定しない場合は'normal'です。

動き

動きは'linear'と'swing'の2種類あります。 'linear'は常に一定の速度で動き、'swing'は最初がゆっくりで後半が速くなります。 指定しない場合は'swing'となります。

コールバック関数

コールバック関数とは、他の関数に引数として渡す関数のことです。 アニメーション完了時にこのコールバック関数が実行されます。

コールバック関数を記述する場合は、次のようになります。


$('#div1').animate({'top': '200px'}, 1000, function(){
    // 実行処理
    console.log('end');
}) ;

上のプログラムでは、animate()メソッドが完了してからconsole.log()が実行されます。

実践編

小技編

メソッド

関連サイト