【Webデザインのアクセントに】jQueryで要素を点滅させる

2024-04-08

jQueryで要素を点滅させる方法

fadeTo() メソッドは、要素の透明度を徐々に変化させるアニメーションを作成できます。点滅させるには、fadeTo() メソッドを繰り返し呼び出して、要素を透明と不透明の間で交互に切り替えます。

// 要素を点滅させる関数
function flashElement(element) {
  setInterval(function() {
    element.fadeTo(500, 0.1, function() {
      element.fadeTo(500, 1);
    });
  }, 1000);
}

// 要素を点滅させる
flashElement($('.flash'));

このコードでは、.flash クラスを持つ要素を点滅させます。

setInterval() 関数は、指定された間隔で関数を呼び出します。この場合、1秒間隔で fadeTo() メソッドを呼び出しています。
fadeTo() メソッドは、最初の引数でアニメーションの長さを、2番目の引数で要素の最終的な透明度を指定します。この場合、500ミリ秒かけて要素を透明度0.1に変化させ、その後500ミリ秒かけて透明度1に戻しています。

animate() メソッドは、要素のさまざまなプロパティをアニメーションさせることができます。点滅させるには、opacity プロパティを0と1の間で交互に変化させます。

// 要素を点滅させる関数
function flashElement(element) {
  setInterval(function() {
    element.animate({
      opacity: 0
    }, 500, function() {
      element.animate({
        opacity: 1
      }, 500);
    });
  }, 1000);
}

// 要素を点滅させる
flashElement($('.flash'));

このコードは、fadeTo() メソッドを使ったコードとほぼ同じですが、animate() メソッドを使って opacity プロパティをアニメーションさせています。

上記以外にも、CSSアニメーションを使って要素を点滅させることもできます。CSSアニメーションの方がコード量が少なく、より効率的にアニメーションを作成できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryで要素を点滅させる</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>要素を点滅させる</h1>
  <p class="flash">点滅する要素</p>

  <script>
  // 要素を点滅させる関数
  function flashElement(element) {
    setInterval(function() {
      element.fadeTo(500, 0.1, function() {
        element.fadeTo(500, 1);
      });
    }, 1000);
  }

  // 要素を点滅させる
  flashElement($('.flash'));
  </script>
</body>
</html>

このコードを実行すると、<h1> 要素の下にある p 要素が点滅します。

コードの説明

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryで要素を点滅させる</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>要素を点滅させる</h1>
  <p class="flash">点滅する要素</p>

  <script>
  // 要素を点滅させる関数
  function flashElement(element) {
    setInterval(function() {
      element.fadeTo(500, 0.1, function() {
        element.fadeTo(500, 1);
      });
    }, 1000);
  }

  // 要素を点滅させる
  flashElement($('.flash'));
  </script>
</body>
</html>

<!DOCTYPE html>: HTML文書であることを宣言します。
<html lang="ja">: HTML文書の言語を日本語と指定します。
<head>: HTML文書のヘッダー部分です。
<meta charset="UTF-8">: 文字コードをUTF-8と指定します。
<title>jQueryで要素を点滅させる</title>: HTML文書のタイトルを指定します。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: jQueryライブラリを読み込みます。
<h1>要素を点滅させる</h1>: h1 要素で「要素を点滅させる」という見出しを表示します。
<p class="flash">点滅する要素</p>: p 要素で「点滅する要素」というテキストを表示します。

// 要素を点滅させる関数
function flashElement(element) {
  setInterval(function() {
    element.fadeTo(500, 0.1, function() {
      element.fadeTo(500, 1);
    });
  }, 1000);
}

// 要素を点滅させる
flashElement($('.flash'));

// 要素を点滅させる関数: flashElement という名前の関数を定義します。
function flashElement(element): element という名前の引数を受け取る関数を定義します。
setInterval(function() {: 1秒間隔で関数を呼び出すように setInterval 関数を使います。
element.fadeTo(500, 0.1, function() {: element 要素を500ミリ秒かけて透明度0.1に変化させます。
});: setInterval 関数の終わりです。
flashElement($('.flash'));: .flash クラスを持つ要素を点滅させるように flashElement 関数を呼び出します。

実

jQueryで要素を点滅させる他の方法

toggle() メソッドを使う

// 要素を点滅させる関数
function flashElement(element) {
  setInterval(function() {
    element.toggle();
  }, 500);
}

// 要素を点滅させる
flashElement($('.flash'));

このコードは、fadeTo() メソッドを使ったコードよりも簡潔ですが、点滅の速度が一定ではありません。

<style>
.flash {
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>