第7回 エフェクト編：連載：jQuery逆引きリファレンス（17/19 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　「アニメーション効果を指定順に実行するには？」でも見たように、animateメソッドをメソッド・チェーンで連結した場合、アニメーションは指定順に実行されるのがデフォルトの挙動です。しかし、animateメソッドの引数optionsでqueueキーをfalseに設定することで、アニメーションはキュー（＝待ち行列）に追加されず、そのまま実行されます（つまり、すべてのアニメーションが並列に実行されます）。

　具体的な例を見てみましょう。以下は、指定されたアイコン画像を5秒（＝5000ミリ秒）かけて600×400にリサイズ、また、半透明にする例です。animateメソッドをメソッド・チェーンで複数回に分けて呼び出しているにもかかわらず、それぞれで指定されたアニメーションは（“順番に”ではなく）並列に実行されることを確認してください。

<script type="text/javascript">

$(function() {

  $('img')
    .animate({ height: "400px", width: "600px" },
      {
        duration: 3000,
        queue: false
      }
    ).animate({ opacity: 0.5 },
      {
        duration: 3000,
        queue: false
      }
    );
});

</script>

  ……中略……

<img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" />

リスト119 queueキーで指定されたアニメーションを並列に実行（AnimateQueue.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

5秒後（リサイズと透明化が同時実行）

リスト119の実行結果

　queueキーを削除（コメントアウト）するか、値をtrueに変更することで、リサイズ、半透明化のアニメーションが同時にではなく、順に実行されることも確認してください。