Question

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

我正在使用Img交换代码：

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

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

Answer 1

<强> 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);

  });

Answer 2

要交叉淡化两个图像，两个图像在某些时候都是可见的，因此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

Answer 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>

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

3 个答案: