jquery - 简单的图像交换，悬停时淡入淡出

Question

我正在寻找一种简单的方法来在悬停时使用交叉淡入淡出交换图像。我见过很多解决方案 - 但我发现的所有内容似乎都臃肿且复杂。有没有简单的方法可以实现这一点？

我正在使用的 Img 交换代码:

$(function() {
$(".img-swap").hover(
    function() {
        this.src = this.src.replace("_off","_on");
    },
        function() {
            this.src = this.src.replace("_on","_off");
    });
});

有没有办法在这里添加淡入/淡出？或者这是解决这个问题的错误方法？我所尝试的一切似乎都不起作用!任何帮助将不胜感激。

Answer 1

要使两个图像交叉淡入淡出，两个图像在某个时刻都将可见，因此您在 DOM 中需要两个图像。您可以仅使用一张图像来完成此操作，但随后您必须淡出图像，交换源，然后将其淡入，这并不是真正的交叉淡入淡出。

<img src="image1.png" id="test" />
<img src="image2.png" id="test2" />​

JS:

$('#test').on('mouseenter', function() {
        $(this).fadeOut('slow');
        $('#test2').fadeIn('slow');
});

$('#test2').css({left: $('#test').position().left, top: $('#test').position().top})
           .on('mouseleave', function() {
        $(this).fadeOut('slow');
        $('#test').fadeIn('slow');
});
​

FIDDLE