jQuery animate()メソッドを使いこなして、ワンランク上のアニメーションを実現

2024-04-07

jQueryで背景色をアニメーションさせる

必要なもの

jQueryライブラリ
HTMLファイル
JavaScriptファイル

基本的な使い方

以下のコードは、要素の背景色を徐々に赤から青に変えるアニメーションを作成します。

<div id="my-element"></div>

$(document).ready(function() {
  $("#my-element").animate({
    backgroundColor: "#ff0000",
  }, 1000);

  $("#my-element").animate({
    backgroundColor: "#0000ff",
  }, 1000);
});

このコードは、以下の2つのアニメーションを実行します。

最初の1秒間、要素の背景色は徐々に赤から青に変遷します。

オプション

animate()メソッドには、アニメーションの動作を調整するためのオプションが多数用意されています。

duration: アニメーションの長さをミリ秒単位で指定します。
easing: アニメーションの緩急を指定します。
complete: アニメーション完了時に実行する関数を指定します。

以下のコードは、durationオプションとeasingオプションを使用して、アニメーションの動作を変更します。

$("#my-element").animate({
  backgroundColor: "#ff0000",
}, {
  duration: 2000,
  easing: "swing",
});

このコードは、2秒間かけて要素の背景色を徐々に赤から青に変遷するアニメーションを作成します。easingオプションに"swing"を指定することで、デフォルトの緩急でアニメーションが実行されます。

カラーパレット

animate()メソッドでは、16進数表記だけでなく、カラーパレットの名前も使用できます。

$("#my-element").animate({
  backgroundColor: "green",
}, 1000);

$("#my-element").animate({
  backgroundColor: "yellow",
}, 1000);

jQueryのanimate()メソッドを使用すると、要素の背景色をスムーズに変化させるアニメーションを簡単に作成できます。オプションやカラーパレットを活用することで、さまざまなアニメーションを作成することができます。

<button id="my-button">アニメーションを実行</button>
<div id="my-element"></div>

$(document).ready(function() {
  $("#my-button").click(function() {
    $("#my-element").animate({
      backgroundColor: "#ff0000",
    }, 1000);

    $("#my-element").animate({
      backgroundColor: "#0000ff",
    }, 1000);
  });
});

このコードをHTMLファイルとJavaScriptファイルに保存し、ブラウザで開くと、ボタンをクリックすると要素の背景色が徐々に赤から青に変遷するアニメーションを確認できます。

$("#my-element").animate({
  backgroundColor: "green",
}, 1000);

$("#my-element").animate({
  backgroundColor: "yellow",
}, 1000);

$("#my-element").animate({
  backgroundColor: "#ff0000",
}, 1000);

$("#my-element").animate({
  backgroundColor: "#0000ff",
}, 1000);

$("#my-element").animate({
  backgroundColor: "white",
}, 1000);

上記のサンプルコードを参考に、さまざまなアニメーションを作成してみてください。

jQuery animate() メソッド以外の背景色アニメーション方法

CSSアニメーションを使用すると、コード量を抑えながら複雑なアニメーションを作成できます。

<div id="my-element"></div>

@keyframes my-animation {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

#my-element {
  animation: my-animation 2s linear infinite;
}

このコードは、@keyframesルールで"my-animation"というアニメーションを定義し、要素の背景色を2秒間かけて徐々に赤から青に変遷させます。animationプロパティで、要素にアニメーションを適用します。

JavaScriptのアニメーションフレームAPIを使用すると、より高度なアニメーションを作成できます。

<div id="my-element"></div>

const element = document.getElementById("my-element");

function animate() {
  let startColor = "#ff0000";
  let endColor = "#0000ff";

  let currentTime = 0;
  let duration = 2000;

  const animationLoop = () => {
    currentTime += 16;

    const progress = currentTime / duration;
    const currentColor = blendColors(startColor, endColor, progress);

    element.style.backgroundColor = currentColor;

    if (currentTime < duration) {
      requestAnimationFrame(animationLoop);
    }
  };

  requestAnimationFrame(animationLoop);
}

animate();