添加淡入淡出到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')) 

假设元素绝对定位