連載
» 2010年05月21日 00時00分 公開

連載:jQuery逆引きリファレンス:第7回 エフェクト編 (17/19)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 「アニメーション効果を指定順に実行するには?」でも見たように、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に変更することで、リサイズ、半透明化のアニメーションが同時にではなく、順に実行されることも確認してください。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。