javascript - 为特定的 img 悬停脚本添加 jquery 淡入淡出效果

Question

这可能很简单，但我找不到解决方案。是否有可能（以一种简单的方式！）为这个图像悬停脚本添加一个 jquery 淡入和淡出效果？

$('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" />