【jQuery】画像を点滅させる方法

jQuery を使って画像をフェードイン・フェードアウトを繰り返して点滅させる方法です

デモ

デモは画像ですが、テキストでもdiv 要素でも何でも点滅できます。

HTML

jQuery 依存のスクリプトなので、まず jQuery を読み込みます。
head 内に記載すると良いです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

その下にスクリプトを書きます。

<script type="text/javascript">
$(function(){
	setInterval(function(){
		$('.blink').fadeOut(1200, function(){$(this).fadeIn(200)});
	}, 1400);
});
</script>

あとは、点滅させたい要素にクラス blink を設定するだけです。

<img src="/img/houryu1.jpg" alt="ダム放流中" width="300" height="70" class="blink">