如何将淡入淡出效果添加到jquery图像交换

Question

我找到了一个jQuery图像交换脚本，我用这种方式：

HTML：

<a href="#" class="product-catalog-thumb">
  <img class="img-responsive" src="005.jpg" data-alt-src="005-2.jpg" >
  <h2>Sterling Silver Pendants</h2>
</a>

JS：

//Image Swap on hoover
var sourceSwap = function () {
    var $this = $(this).find("img");
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$('img[data-alt-src]').each(function() {
    new Image().src = $(this).data('alt-src');
});

$(".product-catalog-thumb").hover(sourceSwap, sourceSwap);

它工作正常。 任何人都可以帮助我为这段代码添加淡入淡出效果，我想在交换过程中将图像淡入另一个。