jQueryで複数のアニメーションを順番に実行する方法

jQueryでアニメーションを作る際に、何かのアニメーションの後にもう一つアニメーションをさせたい時にはコールバックを利用します。animateメソッドの後に実行される関数としてコールバック関数を呼び出して、関数内で次のアニメーションを実行するという流れになります。

また順番にアニメーションを実行するプログラムの書き方は他にもあり、queueメソッドを使う方法もあります。

ここでは2つの方法のアニメーションプログラムをご紹介します。

サンプルとして正方形のボックスを移動させるアニメーションの後に、色を変更してまた別の場所に移動する2つ目のアニメーションを実装してみます。

アニメーションを順番に実行

まずはHTMLとCSSでサンプルのオブジェクトを作成します。

HTML

<div id="obj"></div>

簡単にdivでオブジェクトの要素を用意しておきます。

CSS

#obj {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: blue;
}

50pxの正方形として、色を青色に。
あとはポジションを動かすためにpositionプロパティをabsoluteとしておきます。

ここから、作成したボックスをjQueryでアニメーションさせてみます。

jQuery

$(function(){
 
  function move(){
    $('#obj').animate({
      top:'200px',
      left:'200px'
    }, 1000, 'swing' ,function(){
      $(this).css('background-color', 'red').animate({
        top:'0',
        left:'400px'
      }, 1000, 'swing')
    });
  }
  move();
 
});

「function move()」でmoveという関数としてプログラムを書いていますが、関数を作らなくてそのままプログラムを書いていっても構いません。あとでプログラムを扱いやすくしたい人のために一応作っておきます。
最後は「move()」として関数の処理を実行しているだけです。

id「obj」に対してanimateメソッドでポジションのtopとleftを200pxとして移動させます。そのアニメーションに対してdurationを1000と設定して1秒間のアニメーションとします。動きをイージングでswingとします。
その後にfunctionで関数を実行することでアニメーションの後に実行されるコールバック関数を設定できます。

コールバック関数の処理ではcssメソッドでbackground-colorをredとして、その後にメソッドチェーンでanimateメソッドを続けます。ここから2つ目のアニメーションとしてポジションをtopを0、leftを400pxとして移動させます。こちらも1秒間で実行し、動きをswingさせます。

このようにjQueryでアニメーションを順番に動かすプログラムを書く場合は、コールバック関数を書いていきます。

ただ、連続するアニメーションが増えてくるとプログラム処理の階層が深くなり、複雑で見にくいコードとなるためプログラムの修正や改修で苦労することがあります。

3つ目のアニメーションをコールバックで書いてみます。

jQuery

$(function(){
 
  function move(){
    $('#obj').animate({
      top:'200px',
      left:'200px'
    }, 1000, 'swing' ,function(){
      $(this).css('background-color', 'red').animate({
        top:'0',
        left:'400px'
      }, 1000, 'swing' ,function(){
        $(this).css('background-color', 'green').animate({
          left:'0'
        }, 1000, 'swing' ,function(){
          $(this).css('background-color', 'blue');
        });
      });
    });
  }
  move();
 
});

サンプルコードはシンプルなプログラムなのでそこまで複雑に見えないですが、凝ったプログラムを書いていってさらに4つ5つ6つと複数のアニメーションを連結していくとなると結構プログラムコードが見にくくなってきます。

もちろんこれでも問題なくアニメーションは動くのでいいのですが、プログラムコードが気になる、シンプルに見やすく書きたいという方はjQueryのqueue()メソッドを使うと良いでしょう。

queueメソッドを使う

jQueryのqueueメソッドは関数内にアニメーションを設定してキュー（合図）で実行するメソッドになります。
プログラム上では1つずつキューされるので、複数のアニメーションを設定しておけば順番にアニメーションを実行することができます。
また、オブジェクトに対して変化を加えたい場合にはqueue()メソッドを使うととても便利です。

jQuery

$(function(){
 
  function move(){
    $('#obj').animate({
      top:'200px',
      left:'200px'
    }, 1000, 'swing').queue(function(){
      $(this).css('background-color', 'red').dequeue();
    })
    .animate({
      top:'0',
      left:'400px'
    }, 1000, 'swing').queue(function(){
      $(this).css('background-color', 'green').dequeue();
    })
    .animate({
      left:'0'
    }, 1000, 'swing').queue(function(){
      $(this).css('background-color', 'blue').dequeue();
    });
  }
 
  move();
});

queueメソッドの関数内では「$(this).dequeue()」のようにプロパティに対するメソッドを実行した後にdequeue()メソッドを記述する必要があります。
dequeueメソッドは処理が終了したという合図になります。animateメソッドの処理の後にqueueメソッドのキュー処理を実行しますが、dequeueメソッドを記述しないとキューの処理がそこで止まってしまいます。

ですのでqueueメソッドを利用する際は忘れずにdequeueメソッドで処理終了の合図をして次の処理に進めるようにしなければいけません。

また、普通にコールバックをするのと違ってqueueメソッドを利用することでdelayでアニメーションを遅延させるなど、他のメソッドを手軽に実装できるという部分でもqueueメソッドを利用するメリットはあります。

例えば、最初のアニメーションの後に次のアニメーションを2秒後とする場合には以下のようにします。

jQuery

$(function(){
 
  function move(){
    $('#obj').animate({
      top:'200px',
      left:'200px'
    }, 1000, 'swing').delay(2000).queue(function(){
      $(this).css('background-color', 'red').dequeue();
    })
    .animate({
      top:'0',
      left:'400px',
      'border-radius': '50%'
    }, 1000, 'swing').delay(2000).queue(function(){
      $(this).css('background-color', 'green').dequeue();
    })
    .animate({
      left:'0',
      'border-radius': '0'
    }, 1000, 'swing').queue(function(){
      $(this).css('background-color', 'blue').dequeue();
    });
  }
 
  move();
});

animateメソッドの後にdelayを2000として2秒後にqueueメソッドのキューを実行しています。
ちょっと遊びでオブジェクトの形を丸くしたり四角に戻したりしてみました。

もしオブジェクトに対して変化を加えないのであればqueueメソッドの関数内を「「$(this).dequeue();」とだけしてもらえればアニメーションを順番に実行させるだけでもできます。