javascript - jquery画像置換にフェードを追加

Question

ロールオーバー時に画像を置き換えるためにjqueryを使用するナビゲーションを作成しています。これが私が使用しているコードです：

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

基本的に、ファイル名にサフィックス（_o）を追加し、srcをロールオーバーすると、jqueryはそれを（_o）.pngに置き換えます。フェードを追加したいので、ロールオーバーがある場合、遷移は瞬時ではなく、すばやくエレガントなフェードがあります。何か案は？

Answer 1

置き換えるのではなく、新しい画像をオーバーレイしてフェードインし、トランジションが完了するまで待つ必要があります。

何かのようなもの...

$('.my_img').parent().append($('.my_img').clone().attr('src','my_img_o.jpg').fadeIn('slow'))

要素が絶対的に配置されていると仮定します

Answer 2

$('#the_image).hover(function() {
   $(this).fadeOut(function() {
     $(this).attr('src', $(this).attr('src').replace(".png", "_o.png")).fadeIn(); 
   });
}, function {
   $(this).fadeOut(function() {
     $(this).attr('src', $(this).attr('src').replace("_o.png", ".png")).fadeIn(); 
   });
});

Answer 3

デフォルトの画像の上に2番目の（非表示の）要素を重ねてから、ロールオーバーでその要素をフェードインおよびフェードアウトする方法を確認できます。