Question

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

我的标签内有B＆amp; W图像。当您将鼠标悬停在链接上时，我希望将B＆amp; W图像与彩色版本交换并淡入。我正在寻找与此网站上的照片类似的效果：

我的B＆amp; W图像的命名约定以_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

我会做一点不同的事情，那就是使彩色图像成为链接的背景图像而不是交换源。如果您更换信号源，它将无法从一个图像淡入另一个图像 - 为了可能，它们都必须同时在那里。

相反，我会添加一个贯穿所有图像的小功能，并将彩色图像设置为背景图像：

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

Answer 2

除非您使用图像预加载器，否则在更改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>

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

2 个答案: