在图像交换中添加平滑过渡

Question

我有一个带缩略图的小图像库和放大图像的主窗口。当你点击缩略图时，它们会出现在窗口中，所以功能齐全，但是我想添加一个平滑淡入/淡出过渡，而不是仅仅突然交换，但我不知道如何做到这一点。

这里是codepen ... http://codepen.io/anon/pen/uatGg

我当前的jQuery代码...

$('.thumbnails .zoom').click(function(e){ 
    e.preventDefault(); 

    var photo_fullsize = $(this).find('img').attr('src'); 

    $('.woocommerce-main-image img').attr('src', photo_fullsize); 

}); 

我一直在使用淡入淡出和尝试，但我不希望图像淡出（秀白色背景），然后将新图像淡入。我希望图像在当前图像的顶部淡入，因此背景在过渡时从不可见。

Answer 1

您可以使用渐变效果从jQuery的：

$('.woocommerce-main-image img').hide().attr('src', photo_fullsize).fadeIn(); 

见jQuery docs for more options。

如果这会导致图像隐藏某些不需要的HTML包装效果，您还可以将a.woocommerce-main-image缩放元素放置在具有设置高度和宽度的包装div中。