jQueryのmouseover()を使って画像マウスオーバー時に点滅させる方法

jQueryのmouseover()を使って画像マウスオーバー時に点滅させ、マウスアウトで点滅をストップさせる方法をご紹介します。
画像を点滅させる演出をしたい時に利用できます。

画像マウスオーバー時に点滅させるCSSの記述

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

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

jQueryのmouseover()をを使って画像マウスオーバー時に点滅させるJavaScriptの記述

※jquery.js（1.8系）ファイルを読み込みます。mouseoverとsetIntervalでマウスオーバー時に画像を点滅させてます。マウスアウト（mouseout）時にはclearIntervalで点滅をクリア（停止）します。

<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>

画像マウスオーバー（mouseover）時に点滅させるHTMLの記述

※点滅させる画像エリアid=”Logo”を用意します。

<div id="idLogo"><img src="logo1.jpg" alt="ロゴ画像イメージ"></div>

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

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

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

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

ディスプレイ広告

ディスプレイ広告