javascript - 如何在悬停时交换图像时淡入淡出 "this.src.replace"(jQuery)

Question

这个问题已经有答案了:

已关闭 11 年前。

Possible Duplicate:
jQuery fade to new image

我有以下代码可以在悬停时交换(预加载)图像:

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

效果非常好，但是我希望能够在图像 .jpg 和 -h.jpg 之间淡入淡出。

有人知道如何做到这一点/有更好的方法来解决这个问题吗？我尝试了很多不同的 fadeIn() 方法，但所有方法似乎都不起作用，或者只在几次悬停后起作用，然后替换空白图像。

Answer 1

我建议使用鼠标悬停/鼠标悬停方法。

我的 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>

然后使用 jQuery 你可以像这样在它们之间交换

$(".imageWrap").mouseover(function() {
    $(this).children(".shown").fadeOut("fast");
    $(this).children(".hidden").fadeIn("fast");
});

$(".imageWrap").mouseout(function() {
    $(this).children(".shown").fadeIn("fast");
    $(this).children(".hidden").fadeOut("fast");
});

不要忘记你的CSS

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