質問: 下記のコードでhoverイベントを実行しています。 概要 a要素(詳しく見る)にホバーすると、 aの中のimgのファイル名が、_off→_onになり画像が変更されます。 画像は詳しく見るの左に > が入っていてホバーで色や向きが異なる画像に変わるようになっています。 この画像がくり変わる時間をゆっくりにしたいと思っています。 現状は、パッと変わるのでフワッと変わるようにできればと思っています。 あまり大きな変更を加えずに時間を指定する方法がございましたら、教えていただけると助かります。 そのほか方法がありましたらぜひご教示いただきたいです。 よろしくお願いいいたします。 ``` 詳しく見る ``` ``` $(function(){ $('.roll a').hover(function(){ $('.roll a img').attr('src', $('.roll a img').attr('src').replace('_off', '_on')); }, function(){ if (!$('.roll a img').hasClass('currentPage')) { $('.roll a img').attr('src', $('.roll a img').attr('src').replace('_on', '_off')); } }); }); ```
回答: img要素2つ用意して、opacityを変えてクロスフェードする https://jsfiddle.net/Lxr5k5ch/ backgroundとして画像を表示する https://jsfiddle.net/w94oekjv/1/ 後者の方法では、マウスをすばやく出し入れするとtransitionがうまくいかないようです。