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

我正在尝试将shopify平台用于一个小型商业网站。我有我的主要收藏页面上，但我想有一个项目的正面/背面图像悬停效果的网站建设的大部分。目前，我的html是这样输出的，产品列表中的第一项和第二项在一个div中。它在某种程度上起作用。基本上，我想在页面上加载图像fadein，当鼠标悬停在fadeout上时，然后在div中的第二个图像中使用fadein，当鼠标悬停离开时，恢复到原始图像

.html

JSFiddle：

您需要链接

淡出

和

淡入

以避免奇怪的结果。通常最好将鼠标悬停在一个始终存在的元素上，因为当鼠标悬停元素消失时，一些浏览器会做一些奇怪的事情：

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));
});

---

旁注：重复

$（此）

选择器是对处理的浪费。使用一个局部变量（当最小化时，代码也会变短作为奖励）。一旦我找到了正确淡入淡出而不闪烁的最佳方法，就可以使用一个单独的函数。这种方式在站点上也非常可重用。多谢了，我的头撞到墙上了。

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

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));
});