Question

它可能很简单，但我找不到解决方案。是否有可能（以简单的方式！）将jquery fadeIn和fadeOut效果添加到此图像悬停sript？

$('img[data-hover]').hover(function() {
    $(this)
        .attr('tmp', $(this).attr('src'))
        .attr('src', $(this).attr('data-hover'))
        .attr('data-hover', $(this).attr('tmp'))
        .removeAttr('tmp');
}).each(function() {
    $('<img />').attr('src', $(this).attr('data-hover'));
});


<img src="image1.jpg" data-hover="image2.jpg">

Answer 1

使用CSS将img标记设置为所需的起始不透明度，并将其添加到您的代码中：

$('img[data-hover]').mouseover(function() {
    $(this).fadeTo("slow", 1);
}

$('img[data-hover]').mouseout(function () {
    $(this).fadeTo("slow", 0.25); // where 0.25 is the desired starting opacity
}

请查看.fadeTo() API文档，因为您可能想要调整它。

Answer 2

你可能想看看这个：

http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

我认为这就是你想要的？

$("img.a").hover(
    function() {
      $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
      $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

HTML：

<img src="image1.jpg" alt="" class="a" />
<img src="image2.jpg" alt="" class="b" />

将jquery淡入淡出效果添加到特定的img悬停脚本

2 个答案: