Webページ上のテキストや画像などの要素を点滅させるには、
古いものでは＜blink＞タグだったり、CSSでの「text-decoration:blink;」などがあったりしますが
タグ自体が廃止タグだったり、ブラウザが対応していなかったりであまり使い物になりません。
そこで、テキストや画像などのコンテンツ要素を
jQueryで簡単に点滅させる方法について自分用メモ程度に紹介してみます。
jQueryで点滅
jQueryでの点滅はいろいろやり方がありますが
シンプルな方法として、対象物に対してfadeInとfadeOutを続けて指定することで
簡単に実現することができます。
例として、画像＜img＞タグを点滅させる場合のスクリプトは以下のようになります。
※今回はHTML／CSSはあまり重要でないので割愛します。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('img').fadeOut(500,function(){$(this).fadeIn(500)});
});
</script>
この記述の場合、
画像が0.5秒かけて消え、0.5秒かけて再表示されるので
1秒間で1回点滅することになります。
ここで指定している「500」の数値の値を変更させることで
点滅スピードを調整することも可能です。
これを実行させると以下のように。
画像が一回だけ点滅します。
これを使って点滅を無限に繰り返す際には
setIntervalを使って以下のように記述します。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){
$('img').fadeOut(500,function(){$(this).fadeIn(500)});
},1000);
});
</script>
これを実行させると以下のように。
画像がずっと点滅し続けます。
ちょっと応用して、複数の要素に対して
タイミングをずらして点滅させるようにするには以下のように。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
setTimeout(function(){$('img#item1').fadeOut(500,function(){$(this).fadeIn(500)});},0);
setTimeout(function(){$('img#item2').fadeOut(500,function(){$(this).fadeIn(500)});},500);
setTimeout(function(){$('img#item3').fadeOut(500,function(){$(this).fadeIn(500)});},1000);
setTimeout(function(){$('img#item4').fadeOut(500,function(){$(this).fadeIn(500)});},1500);
setTimeout(function(){$('img#item5').fadeOut(500,function(){$(this).fadeIn(500)});},2000);
setInterval(function(){
setTimeout(function(){$('img#item1').fadeOut(500,function(){$(this).fadeIn(500)});},0);
setTimeout(function(){$('img#item2').fadeOut(500,function(){$(this).fadeIn(500)});},500);
setTimeout(function(){$('img#item3').fadeOut(500,function(){$(this).fadeIn(500)});},1000);
setTimeout(function(){$('img#item4').fadeOut(500,function(){$(this).fadeIn(500)});},1500);
setTimeout(function(){$('img#item5').fadeOut(500,function(){$(this).fadeIn(500)});},2000);
},2500);
});
</script>
これを実行させると以下のように。
jQueryを使って点滅させることで
点滅させるタイミングやスピードなども細かく調整できるようになるので
ページ内の目立たせたい要素などに対して、有効に使えるようになるかと思います。
Webページ内の要素を点滅させたいときに是非。。。