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

你可以在默认图像的顶部叠加第二个（隐藏的）元素，然后通过翻转来查看这个元素的进出淡出。