悬停时带有淡入淡出的简单图像交换答案

【问题标题】：Simple image swap with fade on hover悬停时带有淡入淡出的简单图像交换
【发布时间】：2012-12-08 22:31:05
【问题描述】：

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

我正在使用的图片交换代码：

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

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

【问题讨论】：

真正简单的解决方案是拥有两张图像，如果您正在执行交叉淡入淡出，则需要这两张图像，因为两张图像将同时可见，并且只是淡出另一张，比如THIS FIDDLE ???
感谢您的帮助 - 这似乎是最好的解决方案。如果您作为答案发布，我会接受。再次感谢！
乐于助人，用上面的代码添加了答案。

标签： jquery image hover

【解决方案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

【讨论】：

非常感谢。我唯一不同的是删除.css({left: $( '#test' ).position().left, top: $( '#test' ).position().top})，而是在css中添加#test2 { position: absolute; top: 0; left: 0;}
是的，这行得通，我只是使用位置技巧将第二张图像与第一张完全相同，但是包装器和一点 css 也可以解决这个问题，所以不是真正的问题.乐于助人！

【解决方案2】：

jsBin demo

  $(".img-swap").on('mouseenter mouseleave', function( e ){

    var mE = e.type=='mouseenter';
    var c = ['_on','_off'];
    this.src = this.src.replace( mE?c[1]:c[0] , mE?c[0]:c[1] );
    $(this).hide().stop().fadeTo(1000,1);

  });

【讨论】：

这也很好用，但是它会褪色为白色/背景而不是其他图像，尽管我可能没有说清楚。还是谢谢你。
@vonholmes 是的... adeneo 的回答不仅很好，因为它是淡入的最佳方式，而且您的所有图像都将被加载，并且不会有 jQuery 图像请求和加载时间问题:) 不客气

【解决方案3】：

使用下面的代码，还包括 jquery。

 $("#one").hover(function(){$('#one').fadeOut(1000);$('#two').fadeIn(2000);}
);
 $('#one').fadeIn(2000);

<span id="one"><img serc="image1path"></span>
<span id="two" style="display:none"><img serc="image2path"></span>

【讨论】：