表示画像をjQueryを使用して点滅させる方法



画像を点滅させる演出をする際に利用できると思います。
今回はマウスオーバーすると画像を点滅させ、
マウスアウトで点滅をストップさせます。

1.CSSの記述例

以下は任意ですがマウスオーバーする該当箇所のタグに
カーソルをもって言った際にpointerを設定しました。

<style type="text/css">
<!--
#idLogo{
	cursor:pointer;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	var stid = "";

	//マウスオーバーで点滅(setIntervalで繰り返します)
	$("#idLogo").mouseover(function(){
		stid = setInterval(function(){
			$('#idLogo img').fadeOut(300,function(){$(this).fadeIn(300)});
		},600);
	});
	//マウスアウトで点滅をクリア(clearInterval)
	$("#idLogo").mouseout(function(){
		clearInterval(stid);
	});

});
</script>

3.HTMLの記述例

    <div id="idLogo"><img src="/wp-content/plugins/wp-ogp/default.jpg" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></div>

表示画像をjQueryを使用して点滅させるデモ

点滅程度でしたらアニメーションgifでも良さそうですが、
使い時はケースバイケースですかね。