jQueryのmouseover()を使って画像マウスオーバー時に点滅させ、マウスアウトで点滅をストップさせる方法をご紹介します。
画像を点滅させる演出をしたい時に利用できます。
Contents
ディスプレイ広告
画像マウスオーバー時に点滅させる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を使用して点滅させるデモページ
点滅程度でしたらアニメーションgifでも良さそうですが、使い時はケースバイケースですかね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。