jQueryで要素を点滅させる方法をご紹介!

今回はjQueryを用いて要素を点滅させる方法を紹介します。しかし、jQueryには要素を点滅させるというメソッドはありません。そこで既存のメソッドを組み合わせることによって、jQueryで要素を点滅させる方法を紹介します。

コンテンツ [表示]

  1. 1jQueryで要素を点滅させる方法
  2. 1.1点滅させる方法
  3. 1.2繰り返し点滅させたい場合

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

文字や画像のimgタグを点滅させたい場合はどのように実装したら良いでしょうか?

以前は点滅させるアニメーションはtext-decorationプロパティに対してblinkという値を適用することで要素を点滅させることができました。

しかし、現在この設定値は廃止となっています。

そこで今回はjQueryを用いて要素を点滅させる方法を解説します。

点滅させる方法

要素を点滅させるには.fadeOut()メソッドと.fadeIn()メソッドを連続して動作させます。

以下のサンプルコードをご覧ください。

ボタンを押すことでテキストが点滅します。

このように点滅することを確認できました。

しかし今のままではボタンを押したときに1回しか点滅しません。
 

繰り返し点滅させたい場合

先ほどのサンプルコードでは1回しか点滅しませんでした。

繰り返し点滅させるためにはsetIntervalプロパティを使い以下のように記述します。

このように何度も点滅させることができました。

また点滅させる回数はsetIntervalのミリ秒で調整できます

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。