Question

我正在尝试将shopify平台用于小型商业网站。我建立了大部分网站，但是在我的主要收藏页面上，我希望对项目的正面/背面有一个图像悬停效果。目前我的html输出如此，产品列表中的第一个和第二个项目在div中。它的工作类型。基本上我想在页面加载时将图像淡化，当在fadeout上盘旋时，然后在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));
});

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

1 个答案: