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

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

1．CSSの記述例

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

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

2．JavaScriptの記述例

<script type="text/javascript" src="https://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="logo1.jpg" alt="ロゴ画像イメージ"></div>

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

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