最終更新日: 2021年2月20日
jQueryで要素を点滅させる方法をご紹介！
今回はjQueryを用いて要素を点滅させる方法を紹介します。しかし、jQueryには要素を点滅させるというメソッドはありません。そこで既存のメソッドを組み合わせることによって、jQueryで要素を点滅させる方法を紹介します。
jQueryで要素を点滅させる方法
文字や画像のimgタグを点滅させたい場合はどのように実装したら良いでしょうか？
以前は点滅させるアニメーションはtext-decorationプロパティに対してblinkという値を適用することで要素を点滅させることができました。
しかし、現在この設定値は廃止となっています。
そこで今回はjQueryを用いて要素を点滅させる方法を解説します。
点滅させる方法
要素を点滅させるには.fadeOut()メソッドと.fadeIn()メソッドを連続して動作させます。
以下のサンプルコードをご覧ください。
ボタンを押すことでテキストが点滅します。
このように点滅することを確認できました。
しかし今のままではボタンを押したときに1回しか点滅しません。
繰り返し点滅させたい場合
先ほどのサンプルコードでは1回しか点滅しませんでした。
繰り返し点滅させるためにはsetIntervalプロパティを使い以下のように記述します。
このように何度も点滅させることができました。
また点滅させる回数はsetIntervalのミリ秒で調整できます
