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

【问题标题】：Add a jquery fade effect to specific img hover script为特定的 img 悬停脚本添加 jquery 淡入淡出效果
【发布时间】：2013-12-20 16:57:02
【问题描述】：

这可能很简单，但我找不到解决方案。是否可以（以一种简单的方式！）为此图像悬停脚本添加 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">

【问题讨论】：

你看过 .fadeToggle() - api.jquery.com/fadeToggle
是的，但是我不太懂JS，那是我的问题...

标签： javascript jquery html fadein fadeto

【解决方案1】：

你可能想看看这个：

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" />

【讨论】：

这是我想要的，但我不能使用“位置：绝对”，因为我使用的是响应式网格......
您可以使用相对位置，这应该不是问题。
好的，如果我只对 img.a 使用绝对值，它就可以正常工作！谢谢！！

【解决方案2】：

使用 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 文档，因为您可能想要调整它。

【讨论】：