jQueryでWebデザインをもっと自由に！同時アニメーションで表現力アップ

2024-07-27

jQueryで2つのアニメーションを同時に実行する方法

queueオプションを使用する

jQueryのanimate()メソッドには、queueオプションというオプションがあります。このオプションにfalseを指定することで、アニメーションをキューに格納せずに同時に実行することができます。

以下のコード例は、要素をスライドアップとフェードアウトを同時に実行する例です。

$(element).animate({
  top: "0px",
  opacity: 0
}, {
  duration: 500,
  queue: false
});

別々のキューを使用する

jQueryでは、アニメーションごとに異なるキューを使用することができます。キューとは、アニメーションを順番に実行するためのバッファのようなものです。デフォルトでは、"fx"という名前のキューが使用されますが、別の名前のキューを指定することで、複数のアニメーションを同時に実行することができます。

$(element).animate({
  top: "0px"
}, {
  duration: 500,
  queue: "myqueue1"
});

$(element).animate({
  opacity: 0
}, {
  duration: 500,
  queue: "myqueue2"
});

上記のコードでは、myqueue1とmyqueue2という2つのキューが作成されます。それぞれのアニメーションは、それぞれのキューに格納されるため、同時に実行されます。

複数のアニメーションを同時に実行する場合、アニメーションがどのように見えるかは、アニメーションの内容や順番によって異なります。
アニメーションの速度を調整したい場合は、durationオプションを使用することができます。

<div id="element">要素</div>

CSS

#element {
  width: 100px;
  height: 100px;
  background-color: #000;
  position: relative;
}

JavaScript

$(document).ready(function() {
  // 要素をスライドアップ
  $("#element").animate({
    top: "-100px"
  }, {
    duration: 500,
    queue: false
  });

  // 要素をフェードアウト
  $("#element").animate({
    opacity: 0
  }, {
    duration: 500,
    queue: false
  });
});

このコードを実行すると、要素が同時にスライドアップとフェードアウトします。

説明

このコードでは、まず$("#element")を使用して要素を選択します。
次に、animate()メソッドを使用して、要素をスライドアップします。topプロパティを-100pxに設定することで、要素が100ピクセル上方向に移動します。
durationオプションを500に設定することで、アニメーションが500ミリ秒間実行されます。
queueオプションをfalseに設定することで、アニメーションをキューに格納せずに同時に実行します。
次に、animate()メソッドを使用して、要素をフェードアウトします。opacityプロパティを0に設定することで、要素が透明になります。

バリエーション

このコードは、さまざまな方法でバリエーションを変更することができます。たとえば、以下のことができます。

アニメーションの速度を変更するには、durationオプションの値を変更します。
アニメーションの方向を変更するには、topプロパティの値を変更します。
アニメーションの色を変更するには、background-colorプロパティの値を変更します。

Promiseを使用して、2つのアニメーションを順番に実行することができます。ただし、厳密には同時実行ではありません。

$(document).ready(function() {
  // 要素をスライドアップ
  $("#element").animate({
    top: "-100px"
  }, 500)
  .then(function() {
    // 要素をフェードアウト
    $("#element").animate({
      opacity: 0
    }, 500);
  });
});

このコードでは、まずanimate()メソッドを使用して、要素をスライドアップします。アニメーションが完了したら、then()メソッド内のコールバック関数が実行されます。このコールバック関数内で、animate()メソッドを使用して、要素をフェードアウトします。

jQuery.fx.speedsオプションを使用する

jQuery.fx.speedsオプションを使用すると、アニメーションのデフォルト速度を変更することができます。このオプションを使用して、2つのアニメーションを異なる速度で実行することができます。

$(document).ready(function() {
  // 要素をゆっくりとスライドアップ
  $("#element").animate({
    top: "-100px"
  }, {
    duration: 1000,
    queue: false
  });

  // 要素を素早くフェードアウト
  $("#element").animate({
    opacity: 0
  }, {
    duration: 200,
    queue: false
  });
});

このコードでは、durationオプションを1000に設定することで、最初のアニメーションが1秒間実行されます。durationオプションを200に設定することで、2番目のアニメーションが200ミリ秒間実行されます。

CSSトランジションを使用する

CSSトランジションを使用して、2つのアニメーションを同時に実行することができます。

#element {
  width: 100px;
  height: 100px;
  background-color: #000;
  position: relative;
  transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

#element.active {
  top: -100px;
  opacity: 0;
}