Javascript 向jquery图像替换添加淡入淡出

我正在创建一个nav，它使用jquery在翻滚时替换图像。以下是我正在使用的代码：

---

基本上，您向文件名添加后缀（_o），当您滚动src时，jquery将其替换为（_o）.png。我想添加淡入淡出，这样当有滚动时，过渡不是瞬间的，而是快速、优雅的淡入淡出。有什么想法吗？

您可以在默认图像的顶部分层第二个（隐藏）元素，然后查看如何通过滚动来淡入淡出该元素。

您必须覆盖一个新图像并淡入淡入，直到过渡完成

类似于

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

---

假设元素处于绝对位置

谢谢Ben。做这件事有点困难。我正在尝试制作一个导航，有5幅图像。每个图像都需要有淡入悬停效果。因此，在jquery代码（）中，我需要删除任何内容，还是可以简单地使用这个代码段？我需要按顺序重复5次吗？如果您能告诉我插入的合适位置，我将不胜感激。谢谢。另外（'.my_img'）将替换为（'image.png'），对吗？

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