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