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

Question

我有一个带有缩略图的小图片库和一个用于放大图像的主窗口。当您单击缩略图时，它们会出现在窗口中，功能齐全，但是我想添加一个平滑的淡入/淡出过渡，而不仅仅是突然的交换，但是我不知道该怎么做。

这是代码笔... 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 文档。

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