Javascript “如何褪色”；本.src.替换为“；在悬停（jQuery）上交换图像时

可能重复：

我有以下代码可以在悬停时交换（预加载）图像：

$(document).ready(function() { 
$(".pf-item img").hover(
      function(){this.src = this.src.replace(".jpg","-h.jpg");},
      function(){this.src = this.src.replace("-h.jpg",".jpg");
 });
 var imgSwap = [];
 $(".img-swap").each(function(){
    imgUrl = this.src.replace(".jpg","-h.jpg");
    imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

$（文档）.ready（函数（）{
$（“.pf项目img”）。悬停(
函数（）{this.src=this.src.replace（“.jpg”，“-h.jpg”）；}，
function（）{this.src=this.src.replace（“-h.jpg”，“.jpg”）；
});
var imgSwap=[]；
$（“.img swap”）。每个（函数（）{
imgUrl=this.src.replace（“.jpg”，“-h.jpg”）；
imgSwap.push（imgUrl）；
});
$（imgSwap.preload（）；
});
$.fn.preload=函数（）{
这个。每个（函数（）{
$('
它工作得非常好，但是我希望能够在图像.jpg和-h.jpg之间淡入淡出

有人知道怎么做/有更好的方法来解决这个问题吗？我尝试了很多不同的fadeIn（）方法，但似乎都不起作用，或者只需要几次悬停，然后替换一张空白图像。
我建议使用鼠标悬停/鼠标悬停的方法

我有我的HTML设置如下

<div class="imageWrap">
    <img class="shown" src="image-1.jpg" width="300" height="300" />
    <img class="hidden" src="image-2.jpg" width="300" height="300" />
</div>

别忘了你的css

.imageWrap {width:300px; height:300px;}
.imageWrap > img {position:absolute;}
.imageWrap > .hidden {display:none;}

您必须将一个图像置于另一个图像之上（使用CSS
position:absolute；
），并将顶部的图像置于
fadeOut（）
。将有一个jQuery插件在某处执行此操作。可能与或重复-另请参阅
.imageWrap {width:300px; height:300px;}
.imageWrap > img {position:absolute;}
.imageWrap > .hidden {display:none;}