下記のコードでhoverイベントを実行しています。
概要
a要素(詳しく見る)にホバーすると、 aの中のimgのファイル名が、_off→_onになり画像が変更されます。
画像は詳しく見るの左に > が入っていてホバーで色や向きが異なる画像に変わるようになっています。
この画像がくり変わる時間をゆっくりにしたいと思っています。
現状は、パッと変わるのでフワッと変わるようにできればと思っています。
あまり大きな変更を加えずに時間を指定する方法がございましたら、教えていただけると助かります。
そのほか方法がありましたらぜひご教示いただきたいです。
よろしくお願いいいたします。
html
1<div class="roll"> 2 <a href="#" target="_blank">詳しく見る<span><img src="img/a_off.png"></span></a> 3 </div>
js
1$(function(){ 2 $('.roll a').hover(function(){ 3 $('.roll a img').attr('src', $('.roll a img').attr('src').replace('_off', '_on')); 4 }, function(){ 5 if (!$('.roll a img').hasClass('currentPage')) { 6 $('.roll a img').attr('src', $('.roll a img').attr('src').replace('_on', '_off')); 7 } 8 }); 9});
回答3件
あなたの回答
tips
プレビュー