javascript - 添加淡入淡出到 jquery 图像替换

Question

我正在创建一个导航，它使用 jquery 来替换翻转时的图像。这是我正在使用的代码:

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

基本上，您向文件名添加后缀 (_o)，当您翻转 src 时，jquery 将其替换为 (_o).png。我想添加淡入淡出，这样当发生翻转时，过渡不是即时的，而是有一个快速、优雅的淡入淡出。有什么想法吗？

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(); 
   });
});