如何使用 Jquery 和 .fadeIn 效果在悬停时交换图像？

Question

标题说明了一切。如何使用 JQuery 和 .fadeIn 效果在悬停时交换图像？

我有一个标签，里面有一张黑白图像。当您将鼠标悬停在链接上时，我希望将黑白图像换成彩色版本并淡入。我正在寻找与本网站上的照片类似的效果：

http://www.manuelle-gautrand.com/

我的黑白图像的命名约定以 _bw 结尾，而我的彩色图像的名称相同，但没有 _bw。

这是我的 HTML：

<a href="link.html" class="item"><img src="images/cool_restaurant_bw.jpg" alt="Cool Restaurant" width="200" height="300"></a>

jQuery

$(document).ready(function() {
    $(".item").hover( function() {
        $(this).find("img").stop().fadeOut(0, function() {
            $(this).find("img").attr("src", $(this).attr("src").replace("_bw", ""));}).fadeIn(400);
    },
        $(this).find("img").stop().fadeOut(0, function() {
            $(this).find("img").attr("src", $(this).attr("src") + "_bw");}).fadeIn(0);
    );
});

我的代码不起作用。有什么建议吗？

提前谢谢大家

Answer 1

除非您使用图像预加载器，否则在更改 src 时会遇到加载问题。

最好加载所有图片（注意顶部图片上的display:none;）。

然后使用 jQuery toggle() 和 fadeIn() fadeOut() 函数。
如果您不想在悬停开始时出现白色闪烁（与您发布的链接相同），那么您可以删除 toggle() 语句。

$(".item").hover(
  function() {
    // fade in
    $(this).find('.bottom-image').toggle(0);
    $(this).find('.top-image').fadeIn(500);
  }, function() {
    //fade out
    $(this).find('.bottom-image').toggle(0);
    $(this).find('.top-image').fadeOut(500);
  }
);

.bottom-image,
.top-image {
  position: absolute;
}

.bottom-image {
  background-color: #777;
}
.top-image {
  display: none;
  background-color: #33a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="link.html" class="item">
  <img src="images/cool_restaurant_bw.jpg" alt="Cool Restaurant" width="200" height="300" class="bottom-image">
  <img src="images/cool_restaurant.jpg" alt="Cool Restaurant" width="200" height="300" class="top-image">
</a>

Answer 2

我会做一些不同的事情，那就是让彩色图像成为链接的背景图像，而不是交换来源。如果您交换源，它将无法从一个图像淡入另一个图像 - 为此，它们必须同时存在。

相反，我会添加一个小函数来遍历所有图像并将彩色图像设置为背景图像：

$('.item').each(
    function() {
        var colorbg = $(this).find('img').attr('src').replace("_bw", "");
        $(this).css('background', 'url(' + colorbg + ')');
    }
);

您还必须在链接中添加一些 CSS：

.item {
    display: block;
    height: 300px;
    width: 200px;
}

然后您可以为图像设置动画以在悬停时按照您想要的方式淡入和淡出：

$('.item').hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, 0);
        $(this).find('img').stop().animate({"opacity": "0"}, 0);
        $(this).stop().animate({"opacity": "1"}, 500);
    },
    function() {
        $(this).find('img').stop().animate({"opacity": "1"}, 0);
    }
);

（上面的函数首先使链接和图像“不可见”，然后淡入链接，即彩色图像。）

这是一个小提琴（使用不同的图片来源）：http://jsfiddle.net/Niffler/Lvpx9h3j/