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

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

});

我尝试过使用fadeIn和fadeOut，但我不希望图像淡出（显示白色背景），然后淡入新图像。我希望图像在当前图像的顶部淡入，所以在转换过程中，背景永远不可见。

Answer 1

你可以使用jQuery的淡入淡出效果：

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

请参阅jQuery docs for more options。

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