jQuery Academy · レッスン

アニメーションの連結とキュー管理

複数のアニメーションメソッドを連結し、アニメーションキューを管理して、動的なインターフェースに連続的かつ調和した視覚効果を作成する方法を学びます。

「アニメーションの連結とキュー管理」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン1/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

アニメーションチェーン入門

要素を移動させ、次に色を変え、その後フェードアウトさせたいとします。これらを手動で1つずつ実行するのは大変です。

jQueryのアニメーションチェーンを使うと、複数のアニメーションメソッドをつなげられます。各アニメーションは前のアニメーションが完了してから開始されるため、滑らかで連続的な効果を作成できます。

基本的なチェーン構文

jQueryのメソッドは、多くの場合、jQueryオブジェクト自体を返します。そのため、結果に対して別のメソッドを直接呼び出し、「チェーン」を形成できます。

ここでは、ボックスを右に移動してから下に移動します。実行してみてください。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

複雑なシーケンスを構築する

多くのアニメーションメソッドをつなげることができます。jQueryはこれらのアニメーションを内部キューに自動的に追加し、定義した順番で実行されるようにします。

これにより、UI要素に連続した流れを作成できます。ボックスが移動し、拡大してからフェードアウトする様子を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

アニメーションキューの仕組み

アニメーションメソッドをチェーンしても、jQueryはそれらをすべて同時に実行するわけではありません。代わりに、アニメーションキュー（「fx」キュー）と呼ばれる専用のリストに追加します。

最初のアニメーションはすぐに開始されます。
続くアニメーションはキューで待機します。
アニメーションが完了すると、jQueryはキューから次のアニメーションを自動的に取り出して開始します。

これにより、アニメーションが順番どおり、予測可能な形で実行されます。

.delay()で一時停止を追加する

アニメーションの間に一時停止が必要になることがあります。その場合は.delay()メソッドが最適です。指定した時間、アニメーションキュー内の後続項目の実行を一時停止します。

ボックスが移動し、一時停止してから、再び移動します。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

キューでカスタムコードを実行する

.queue()を使うと、アニメーション以外の関数をキューに直接挿入できます。これにより、アニメーションの間に、テキストの変更やクラスの追加などの処理を正確に実行できます。

関数はキュー内で順番が来たときに実行されます。カスタム関数内でnext()を呼び出し、jQueryにキューの次の項目へ進むよう伝えることを忘れないでください。

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

.stop()でアニメーションを中断する

アニメーションを途中で停止したい場合はどうすればよいでしょうか。.stop()メソッドを使います。要素で現在実行中のアニメーションを停止できます。

.stop(true)：現在のアニメーションを停止し、アニメーションキュー全体をクリアします。
.stop(false, true)：現在のアニメーションを停止して終了状態に移行しますが、キューはクリアしません。

計画したシーケンスが乱れる可能性があるため、慎重に使用してください。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

.finish()でアニメーションの終了状態に移行する

.finish()メソッドを使うと、要素で現在実行中のすべてのアニメーションを直ちに完了させ、アニメーションキューをクリアできます。

すべてのアニメーションに対して.stop(true, true)を呼び出すような動作です。
要素は、キューに入っているすべてのアニメーションの最終状態に即座に移行します。

「リセット」ボタンや、要素をアニメーションの最終状態へすばやく移行させる場合に便利です。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

さまざまな効果をチェーンする

チェーンできるのは.animate()だけではありません。.fadeIn()、.slideUp()、.slideToggle()など、さまざまなjQueryアニメーションメソッドをチェーンできます。

これらのメソッドも同じアニメーションキューを使用するため、複雑な視覚的シーケンスを簡単に作成できます。

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

チェーンの簡単な確認

次のjQueryコードについて考えてみましょう。ボタンをクリックした後、#myBoxは最終的にどのような状態になるでしょうか。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

復習：チェーンとキュー

よくできました。jQueryのアニメーションチェーンとキューの仕組みを使って、動的で連続的な視覚効果を作成する方法を学びました。

チェーン：複数のアニメーションメソッドをつなげます。
キュー：jQueryがアニメーションを順番に管理します。
.delay()：アニメーションの間で一時停止します。
.queue()：カスタム関数をキューに挿入します。
.stop()：アニメーションを中断するか、キューをクリアします。
.finish()：キューに入っているすべてのアニメーションを即座に完了させます。

次は、さらに細かく制御するためのカスタムイージングとアニメーションコールバックについて学びます。

よくある質問

「アニメーションの連結とキュー管理」レッスンは無料ですか？

はい。「アニメーションの連結とキュー管理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「アニメーションの連結とキュー管理」で何を学びますか？

複数のアニメーションメソッドを連結し、アニメーションキューを管理して、動的なインターフェースに連続的かつ調和した視覚効果を作成する方法を学びます。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/3です。

「アニメーションの連結とキュー管理」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る