2014/02/26

リッチな表現に欠かせない!animate()メソッドの基本的な使い方【jQuery】

【jQuery】animate()メソッドの使い方 まとめ

JavaScriptでアニメーション動作を行う際に使用するanimate()メソッドの基本的な使い方を紹介します.

目次

animate()メソッドの概要

animate()メソッドは基本的に以下のような記述になります.

.animate(properties[,duration][,easing][,complete])
パラメータ概要
properties 変化させたいCSSのキーと最終的な値を指定.
duration アニメーションさせる時間をミリ秒により指定.
初期値:400
easing イージングの種類を指定
初期値:swing
complete アニメーション動作完了時に実行する処理を指定.

また,以下の記述方法を使用すると,様々なオプションが指定できるようになります.

.animate(properties,options)
パラメータ概要
properties 変化させたいCSSのキーと最終的な値を指定.
options duration アニメーションさせる時間をミリ秒により指定.
初期値:400
easing イージングの種類を指定.
初期値:swing
queue キューに追加するかどうかを指定.
初期値:true(キューに追加)
step アニメーションのフレーム毎に実行する処理を指定.
progress アニメーションのステップ後実行する処理を指定.
complete アニメーション動作完了時に実行する処理を指定.
アニメーション動作完了後に実行する処理を指定.
fail アニメーション動作失敗時に実行する処理を指定.
always アニメーション動作の成功・失敗にかかわらず動作完了時に実行する処理を指定.

動作サンプル

2つのパターンで記述したサンプルを用意しました.動作はほぼ同じなので,記述の違いが理解できると思います.

基本的な記述方法の場合.

$("#button1").click(function(){
    $("#sample1>div").animate({
        width:"500px",
        opacity:"0.6"
        },
        600,
        "swing",
        function(){
            alert("処理完了!");
     });
});

ここの大きさが変化します.

実行時間等をオプションで指定する場合.

$("#button2").click(function() {
    $("#sample2 > div").animate({
        width : "500px",
        opacity : "0.6"
    },{
        duration :600,
        easing:"swing"
        queue:false,
        complete:function(){
            alert("処理完了!");
        }
    });
});

ここの大きさが変化します.

まとめ

アニメーションの基本的な実行方法は以上となります.

最近ではアニメーションの無いWebページはほとんど無いと言っても過言ではないほど使われています.
アニメーション動作をマスターし,是非新しい演出を作ってみてください.