jquery悬停图像交换使用同一div中的2个图像

Question

我正在尝试将 shopify 平台用于小型商业网站。我在我的主要收藏页面上构建了大部分网站，但我希望为项目的正面/背面设置图像悬停效果。目前我的 html 是这样输出的，其中产品列表中的第一项和第二项在 div 中列出。它的工作方式。基本上我想让图像在页面加载时淡入淡出，当悬停在淡出上时，然后淡入 div 中的第二个图像，当悬停叶恢复到原始图像时。

.html

<div class="image">
  <a href="{{ product.url | within: collection }}">
    <img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}"class="img-responsive collectionItem">
    <img src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape  }}"   class="img-responsive collectionItem" style="display:none"/>
  </a>
</div>

.js

$('.collectionItem').hover(function() {
    $(this).fadeOut();
    $(this).next('img').stop(true, true).fadeIn('slow');
        }, function() {
    $(this).next('img').fadeOut();
    $(this).stop(true, true).fadeIn('slow');
});

Answer 1

JSFiddle：http://jsfiddle.net/TrueBlueAussie/49fpX/1/

您需要链接fade out 和fade in 以避免奇怪的结果。将鼠标悬停在一个元素上通常会更好，因为当悬停元素消失时，一些浏览器会做一些奇怪的事情：

function swapImg($container) {
    var $image = $container.find('img:visible');
    var $image2 = $image.siblings();
    $image.stop().fadeOut(function(){
        $image2.stop().fadeIn();
    });
}
$('.image').hover(function () {
    swapImg($(this));
}, function () {
    swapImg($(this));
});