添加淡入淡出到jQuery圖像替換

Question

我創建一個導航，使用jquery替換翻轉圖像。這裏是我使用的代碼：

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

基本上，你一個後綴（_O）添加到文件名，當你翻轉的SRC，jQuery的與（_O）巴紐替換它。我想添加淡入淡出效果，所以當出現轉換時，轉換不是即時的，而是快速優雅的淡入淡出。有任何想法嗎？

Answer 1

$('#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 2

您可以將第二個（隱藏）元素疊加到默認圖像的頂部，然後查看關於使用翻轉來淡入淡入淡出的內容。

Answer 3

而不是替換，你必須覆蓋一個新的圖像並淡入，等待轉換完成。

像...

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

假設元素絕對定位