Web’Notes

【jQuery】animate関数の仕様と使い方

jQueryではjavascriptで出来なかったエフェクトの実装が簡単に出来るようになりました。

中でも要素にアニメーションを付加するanimate関数は、他のものとは違い自作のアニメーションが作れる関数です。animate関数の使い方を覚えれば自分の好みに合ったアニメーションが作れ、Webページをよりリッチなものと出来ます。

今回はこのanimete関数の使い方と仕様をまとめましたので紹介します。

1. animate関数の仕様
2. paramsの設定方法
3. durationの指定方法
4. callbackの使い方
5. easingの指定方法と種類
6. animete関数で色を変化させる方法

animate関数の仕様

animate(params, [duration], [easing], [callback])

[    ]で括られている引数は省略可能です。

animate関数は指定したパラメータによって、形や動きにアニメーションを与えることが出来ますが、全てのプロパティが使用できるわけではありません。

animate関数で利用できるプロパティは数値を扱うプロパティのみとなります。例えば「left:100px;」や「width:100px」「opacity:0.5」などが対象となります。

数値を扱わないプロパティは基本的にanimate関数で利用できません。例えば「color:#fff」などコードを使用するプロパティや「display:block」などの指定の文字列を使用するプロパティは、animate関数で利用できないため注意が必要です。

基本的にはと記載したのは、カラーコードのみ専用のプラグインを読み込めばanimate関数で利用が出来るようになるからです。

• animete関数で色を変化させる方法

paramsの設定方法

//animate(params)
function sample_ani1(){
    $("#demo1").animate({left:"200px"});
}

DEMO

複数のパラメータを指定するときは、「,」(カンマ)で区切ります。また「+(-)=」と記載すると値を加減算出来ます。

//animate(params)
function sample_ani2(){
    $("#demo2").animate({
                        left:"+=10px"
                        ,width:"-=2px"
                        ,opacity:0.7});
}

DEMO

durationの指定方法

durationはアニメーションの速度を決めるための引数です。指定方法は2種類あり定義済みの文字かミリ秒で指定を行います。

定義済みの文字には、速度の遅い順に「slow」「normal」「fast」の3つがあります。

<a class="demobtn" onclick="sample_ani3('slow')">'slow'</a>
<a class="demobtn" onclick="sample_ani3('normal')">'normal'</a>
<a class="demobtn" onclick="sample_ani3('fast')">'fast'</a>

//animate(params, [duration])
function sample_ani3(duration){
    if($("#demo3").css("left") == "0px"){
        $("#demo3").animate({left:"200px"}, duration);
    }
    else{
        $("#demo3").animate({left:"0px"}, duration);
    }
}

‘slow’ ‘normal’ ‘fast’

//animate(params, [duration])
function sample_ani4(){
    $("#demo4").animate({left:"+=50px"}, 500);
}

DEMO

callbackの使い方

callbackを利用すると関数の実行後に、別の関数を実行することが出来ます。

//animate(params, [duration], [callback])
function sample_ani5(){
    $("#demo5").animate({left:"200px"}, 2000
                        , function(){ 
                            // 元の位置に戻す
                            $("#demo5").animate({left:"0px"}, 2000);
                            // divタグを消す
                            $("#demo5").fadeOut(2000); 
                        });
}

DEMO

easingの指定方法と種類

easingはエフェクトの動きを変化させることが出来ます。デフォルトの状態では、「linear」「swing」の2種類のみ使用が出来ます。

//animate(params, [duration], [easing]) //swing, linear
function sample_ani6(){
    $("#demo6").animate({left:"200px"}, 2000, "swing");
}

DEMO

easingプラグインを使用すると32種類のエフェクト使用できるようになります。

<a class="demobtn" onclick="sample_ani7('easeInBounce')">'easeInBounce'</a>
<a class="demobtn" onclick="sample_ani7('easeOutQuart')">'easeOutQuart'</a>
<a class="demobtn" onclick="sample_ani7('easeInOutExpo')">'easeInOutExpo'</a>

//animate(params, [duration], [easing])
function sample_ani7(easing){
    $("#demo7").animate({left:"200px"}, 2000, easing
                       , function(){ $("#demo7").animate({left:"0px"}); });
}

‘easeInBounce’ ‘easeOutQuart’ ‘easeInOutExpo’

• easingプラグイン
• jQuery Easing – jQuery 日本語リファレンス

animete関数で色を変化させる方法

通常animate関数では色の変更には対応していませんが、jquery-colorプラグインを読み込ませることにより変更が出来るようになります。

//animate(params, [duration])
function sample_ani8(){
    $("#demo8").animate({backgroundColor:"#f00"}, 3000);
}

DEMO

これでanimate関数の仕様と使い方の説明は終了です。ここまでの方法を組み合わせるとこのように独自のアニメーションを要素に与えることが出来るようになります。

DEMO

JavaScript javascript, jQuery