jQuery アニメーションのあれこれ

animateとstopメソッド

animeteメソッド

概要

要素をアニメーションさせます。

構文

1. $(セレクタ).animate( attr [,duration [,easing [,callback]]] )
   1. attr
      属性を指定します。
   2. duration
      動作完了までの期間を指定します。
      ミリ秒単位か、'slow'、'normal'、'fast' の文字列を指定出来ます。
   3. easing
      イージング(動き方)を指定します。
      swing(規定値)かlinearを指定します。
   4. callback
      完了後に発火するcallback関数を設定します。
2. $(セレクタ).animate( attr [,option] )
   1. attr
      属性を指定します。
   2. option
      各オプションをObjectで指定します。(詳細は後述の使用方法で説明)

使用方法

1. $(セレクタ).animate( attr [,duration [,easing [,callback]]] )

<button>Click</button>
<div id="box"></div>

#box {
    background: #555;
    height: 100px;
    width: 100px;
}

$(function() {
    $('button').on('click', function() {
        $('#box').animate(
        // attr
        {
            width: 500,
            height: 800
        },
        // duration
        1000,
        // easing
        'swing',
        // callback
        function() {
            alert('Complete!!!');
        });
    });
});

サンプル

また、属性ごとにeasingを設定する事も出来ます。

$(function() {
    $('button').on('click', function() {
        $('#box').animate({
            width: [800, 'swing'],
            height: [800, 'linear']
        }, 3000, function() {
            alert('Complete!!!');
        });
    });
});

サンプル

属性には += や -= といった現在の数値から相対的に計算するような演算子も使用できます。
その際は、クォーテーションで囲う必要があります。

<button id="left"><<</button><button id="right">>></button>
<div id="box"></div>

#box {
    background: #555;
    position: relative;
    height: 100px;
    width: 100px;
}

$(function() {
    var button;
    $('button').on('click', function() {
        button = this.id;
        if (button === "left") {
            $('#box').animate({
                left: '-=50px'
            }, 500, 'linear');
        } else {
            $('#box').animate({
                left: '+=50px'
            });
        }
    });
});

サンプル

この二つ目のサンプルを確認してもらうと分かりますが、
連続でクリックをすると、どんどんアニメーションのキューが溜まっていきます。
一つ目のサンプルのように、一回きりのアニメーションであればいいのですが、
状況によってアニメーションを変化するものの場合、キューが残り続けるのはよろしくないです。

その場合は、stopメソッドを使用して現在のキューを全て停止した後に、アニメーションをするようにしましょう。
これは後述の stopメソッド の項目を見て下さい。

キューとは？

キュー（queue）
jQueryのアニメ処理は実行と同時に開始されるのではなく、キューと呼ばれる配列に格納されて順々に実行されます。
つまり1つのアニメが完了してから次のアニメが開始されるのです。

jQuery リファレンス：animate( prop, option )

※注意点※

1. 数値意外の属性の操作は出来ません。
   pxやemや%などに指定出来る単位となります。(background-colorの変更は出来ません)
2. ハイフンを含むプロパティについては、キャメルケースで記載が必要です。
   margin-top: 10 は marginTop: 10 と記載しないと動きません。

jQuery リファレンス：animate( prop )

2. $(セレクタ).animate( attr [,option] )

キューに追加やアニメーションの間にfunction実行をしない場合は、前者の構文で対応した方がベターです。

• duration
  目的の値までの期間をミリ秒で指定
• easing
  アニメの加速度のタイプを指定
• queue
  アニメをキューに追加するか以下かを指定
• step
  アニメの期間に連続して実行するfunctionを指定
• complete
  アニメの完了時に実行するfunctionを指定

v1.4〜

• specialEasing
  プロパティ（幅や高さなど）毎に個別のイージングを設定します。

v1.8～

• start
  アニメが開始された時に実行するfunctionを指定
• progress
  アニメの期間に連続して実行するfunctionを指定
• done
  アニメが正常終了した時に実行するfunctionを指定
• fail
  アニメが異常終了した時（stopされた時）に実行するfunctionを指定
• always
  アニメの終了した時（正常/異常にかかわらず）に実行するfunctionを指定

まずは、前者の構文の形で記載してみます。
挙動としては、

1. 左に500px動く
2. 幅500px 高さ800pxに伸びる

と、なります。

<button>Click</button>
<div id="box"></div>

#box {
    background: #555;
    height: 100px;
    width: 100px;
}

$(function() {
    $('button').on('click', function() {
        // 右に800px 動く
        $('#box').animate({
            left: 800
        });

        // 幅500px 高さ800pxに伸びる
        $('#box').animate({
            width: 500,
            height: 800
        }, {
            duration: 3000,
            easing: 'linear',
            complete: function() {
                alert("complete!!!!!!!");
            }
        });
    });
});

サンプル

次にqueueとstepを使用した例をみてみます。
基本は前例と同じです。

queue を falseにした事で、queueにアニメーションをためません。
左に800px動くアニメーションが終わる前に、次のアニメーションが一緒に発動されます。

stepはアニメーション中に連続でcallbackを起動していきます。
ただ、今回のようなケースは、本来であれば一つのanimateの属性指定の箇所にまとめて記載するのがいいです。
今回は例のため、このような表記をしています。

$(function() {
    $('button').on('click', function() {
        var str;
        // 右に800px 動く
        $('#box').animate({
            left: 800
        }, 3000);

        // 幅500px 高さ800pxに伸びる
        $('#box').animate({
            width: 500,
            height: 800
        }, {
            duration: 3000,
            easing: 'linear',
            complete: function() {
                alert("complete!!!!!!");
            },
            queue: false,
            step: function(val, fx) {
                if (fx.prop === "width") {
                    str = fx.prop + ":" + val + "<br>";
                } else {
                    str += fx.prop + ":" + val;
                    $('#box').html(str);
                }
            }
        });
    });
});

サンプル

queueプロパティには真偽値を指定します。
キューにアニメーションを追加するかどうかを指定します。規定値はtrueです。
animateを同期的に動かすなら true
非同期で動かすなら false
と考えると分かりやすいかもしれません。

stepプロパティには引数を設定できます。
function(value, fx) { // 実行したい処理 }

• value
  現在の属性の値
• fx
  現在アニメーションしている属性のObject
  • elem
    アニメーション中の要素
  • start
    アニメーションの最初の値
  • end
    アニメーションの最後の値
  • prop
    現在のアニメーション状態

※注意点※
callbackが属性ごとに実行される
今回の例の場合、width と height の2つを設定しているので、2回分のfunctionが実行されます。

続いて
specialEasing を見ていきます。
これは、属性ごとにeasingを設定する サンプル の別方法となります。
挙動は全く同じです。

$(function() {
    $('button').on('click', function() {
        $('#box').animate({
            width: 500,
            height: 800
        }, {
            duration: 3000,
            specialEasing: {
                width: 'swing',
                height: 'linear'
            },
            complete: function() {
                alert("complete!!!!!!");
            }
        });
    });
});

サンプル

stopメソッド

概要

指定したセレクタのアニメーションを停止します。

構文

$(セレクタ).stop([clearQueue], [gotoEnd])
$(セレクタ).stop(queueName, [clearQueue], [gotoEnd])

1. queueName
   キューの名前
2. clearQueue
   現在のanimateメソッドにあるキューをクリアにするか。
   規定値はfalse
3. gotoEnd
   現在のアニメーションの終了値まで持っていくか。
   規定値はfalse

使用方法

$(function() {
    $('button').on('click', function() {
        /* 例1 */
        $('#box')
            .animate({left: 800})
            .animate({width: 1000});
        // 現在のアニメーションを停止 次の width が発動する。
        // stop(false) 及び stop(false, false) と同義
        $('#box').stop();

        /* 例2 */
        $('#box')
            .animate({left: 800})
            .animate({width: 1000});
        // 現在のアニメーションを停止 キューもクリアする。
        // widthも発動しない
        // stop(true) と同義
        $('#box').stop(true, false);

        /* 例3 */
        $('#box')
            .animate({left: 800})
            .animate({width: 1000});
        // 現在のアニメーションを停止後、終了値まで移動する。
        // キューは残すため width は発動する。
        $('#box').stop(false, true);

        /* 例4 */
        $('#box')
            .animate({left: 800})
            .animate({width: 1000});
        // 現在のアニメーションを停止後、終了値まで移動する。
        // キューもクリアするため、 width は発動しない。
        $('#box').stop(true, true);
    });
});

jQuery入門講座 使い方-アニメの停止

finishメソッド

概要

全てのアニメーションを終了し、最終的な着地点へ移動します。

構文

$(セレクタ).finish([queueName])

使用方法

stopメソッドと違い、残キューも含めた最終的な着地点へ移動します。

$(function() {
    $('button').on('click', function() {
    /* 例1 */
        $('#box')
            .animate({left: 800})
            .animate({width: 1000});
        // widthを含めたキューの最終地点へ移動します
        $('#box').finish();

    /* 例2 */
        $('#box').queue(function() {
            $(this)
                .animate({left: 800})
                .animate({width: 1000});
        });
        // widthを含めたキューの最終地点へ移動します
        $('#box').finish();
    });
});

jQuery リファレンス：finish

queueメソッド / dequeueメソッド

概要

• queue
  Queueの取得、設定を行ないます。
• dequeue
  アニメーションの次のQueueを実行します。

構文

• queue
  • $(セレクタ).queue([queueName])
  • $(セレクタ).queue([queueName], array)
  • $(セレクタ).queue([queueName], func)

queueメソッドは基本的に、dequeueメソッドと合わせて使用します。
使わない例としては後述しますが、queueの数を得たい場合、queueをクリアしたい場合です。

• dequeue
  • $(セレクタ).dequeue([queueName])

使用方法

アニメーションしない例
dequeueメソッドを使用していないので発動しません。
例1はcssは発動しますが、その後のanimateはdequeueメソッドにて呼び出さなければ発動しません。
例2はdequeueメソッドにて呼び出さなければ発動しません。
例3はqueue名を設定してます。queue名を設定した場合は、dequeueメソッドにて呼び出さなければcssも発動しません。

発動しない例

$(function() {
    $('button').on('click', function() {
    /* 例1 */
        $('#box').queue(function() {
            $(this).css({
                backgroundColor: '#000'
            });
            // ここが発動しない
            $(this).animate({
                left: 800
            });
        });

    /* 例2 */
        $('#box').queue(function() {
            // ここから発動しない
            $(this).animate({
                left: 800
            });
        });

    /* 例3 */
        $('#box').queue('name', function() {
            // ここから発動しない
            $(this).css({
                backgroundColor: '#000'
            });
            $(this).animate({
                left: 800
            });
        });

    /* 例4 */
        $('#box').queue('name', function() {
            // 発動しない
            $(this).animate({
                left: 800
            });
        });
        // queue名が指定されている場合、dequeueメソッドでも名称指定をしないと発動しません。
        $('#box').dequeue();
    });
});

成功例

$(function() {
    $('button').on('click', function() {
    /* 例1 */
        $('#box').queue(function() {
            $(this).css({
                backgroundColor: '#000'
            });
            $(this).dequeue(); // dequeueで次のqueueを発動させる
            $(this).animate({
                left: 800
            });
        });

    /* 例2 */
        $('#box').queue(function() {
            $(this).css({
                backgroundColor: '#000'
            });
            $(this).animate({
                left: 800
            });
        });
        // queueメソッドの外でも発動出来る
        $('#box').dequeue();

    /* 例3 */
        $('#box').queue('name', function() {
            $(this).css({
                backgroundColor: '#000'
            });
            $(this).animate({
                left: 800
            });
        });
        // 対象のqueue名を発動させる
        $('#box').dequeue('name');
    });
});

queueの数を見る

$(function() {
    $('button').on('click', function() {
        $('#box').queue(function() {
            $(this).css({backgroundColor: '#00f'}).dequeue();
            console.log($('#box').queue().length); // <= 0

            $(this)
                .animate({left: 500}, 1000)
                .animate({width: 1000}, 1000);
            console.log($('#box7').queue().length); // <= 2
        });

        $('#box7').animate({top: 500}, 1000);
        console.log($('#box7').queue().length); // <= 3
    });
});

queueの取消し

$(function() {
    $('button').on('click', function() {
        // 空の配列を入れる
        $('#box').queue([]);
    });
});

これは後述のclearQueueメソッドと同じ挙動をします。
現在実行しているアニメーション以外のキューを空にします。

jQuery リファレンス：queue
jQuery リファレンス：dequeue

clearQueueメソッド

概要

Queueの中身を空にします。

構文

$(セレクタ).clearQueue([queueName])

使用方法

$(function() {
    $('button').on('click', function() {
    /* 例1 */
        $('#box')
            .animate({left: 800})
            .animate({width: 1000});
        // left終了までアニメーションします。後のキューは発動しません。
        $('#box').clearQueue();

    /* 例2 */
        $('#box').queue(function() {
            $(this)
                .animate({left: 800})
                .animate({width: 1000});
        });
        // 例1と挙動は同様です。
        $('#box').dequeue().clearQueue();

    /* 例3 */
        $('#box').queue(function() {
            $(this).css({backgroundColor: '#00f'}).dequeue();
            $(this)
                .animate({left: 800})
                .animate({width: 1000}).clearQueue();
        });
    });
});

jQuery リファレンス：clearQueue