jQueryでコンテンツ要素を点滅させる方法
Webページ上のテキストや画像などの要素を点滅させるには、
古いものでは＜blink＞タグだったり、CSSでの「text-decoration:blink;」などがあったりしますが
タグ自体が廃止タグだったり、ブラウザが対応していなかったりであまり使い物になりません。
そこで、テキストや画像などのコンテンツ要素を
jQueryで簡単に点滅させる方法について自分用メモ程度に紹介してみます。
jQueryで点滅
jQueryでの点滅はいろいろやり方がありますが
シンプルな方法として、対象物に対してfadeInとfadeOutを続けて指定することで
簡単に実現することができます。
例として、画像＜img＞タグを点滅させる場合のスクリプトは以下のようになります。
※今回はHTML／CSSはあまり重要でないので割愛します。
[javascript]
◆SCRIPT
[/javascript]
この記述の場合、
画像が0.5秒かけて消え、0.5秒かけて再表示されるので
1秒間で1回点滅することになります。
ここで指定している「500」の数値の値を変更させることで
点滅スピードを調整することも可能です。
これを実行させると以下のように。
画像が一回だけ点滅します。
これを使って点滅を無限に繰り返す際には
setIntervalを使って以下のように記述します。
[javascript]
◆SCRIPT
[/javascript]
これを実行させると以下のように。
画像がずっと点滅し続けます。
ちょっと応用して、複数の要素に対して
タイミングをずらして点滅させるようにするには以下のように。
[javascript]
◆SCRIPT
[/javascript]
これを実行させると以下のように。
jQueryを使って点滅させることで
点滅させるタイミングやスピードなども細かく調整できるようになるので
ページ内の目立たせたい要素などに対して、有効に使えるようになるかと思います。
Webページ内の要素を点滅させたいときに是非。。。
ピンバック: jQueryで要素を点滅させる方法 | programming design
いつもタメになる記事を書いていただいて有難うございます。
記事の通りにやってみたら、見本通りにできたのですが、
このj-Query で点滅させた写真のフェードアウト時の透過を50%で止めたいのですが、
どの部分に” fadeTo ”で指定すると宜しいのでしょうか？
初めてのメールで問い合わせてしまい申し訳ございません。。。
＞Mikaさん
コメントありがとうございます。
この点滅スクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきましたフェードアウト時の透過の調整についてですが
当記事で紹介しているスクリプト内の「fadeIn」と「fadeOut」と記載してある部分を
下記のように書き換えることで実現可能かと思います。
———————————————————————————–
$(‘img’).fadeTo(‘500’,0.5,function(){$(this).fadeTo(‘500’,1)});
———————————————————————————–
「500」の数字のところがフェードにかかる時間で
そのとなり「0.5（1）」の数字のところが透過率になります。
お試しください。
よろしくお願いします。
有益な情報感謝感謝です！
例がとってもわかりやすくて良いです
ありがとうございました。(´；ω；｀)
＞ 名無しさん
コメントありがとうございます。
この点滅スクリプトがお役に立ったようで
嬉しく思っております。
他にも色々とスクリプトを紹介させていただいておりますので
あれこれ試していただけると幸いです。
よろしくお願いします。
トレーニングライフログ「トレログ」というのを運営しているものです。
トレーニングをajaxで記録しているときに、「記録中・・・」という文言を点滅表示させるのに参考にさせていただきました。
このような方法があるのですね、勉強になります！
本当に助かりました！ありがとうございました！
＞トレログ管理人さん
コメントありがとうございます。
当記事の点滅スクリプトがその様なサービスを制作する上で
お役に立ったようでとても嬉しく思っております。
当ブログでは他にもあれこれスクリプトを紹介させていただいておりますので
何かの参考にしていただけると幸いです。
よろしくお願いします。