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

您可以在默认图像的顶部放置第二个（隐藏的）元素，然后查看如何通过翻转来淡入和淡出该元素。