向jQuery图像src / data-src悬停交换添加过渡

Question

我需要在悬停时在两个图像之间切换，并在显示时显示淡入淡出的过渡。我正在使用图像的src和data-src属性来执行此操作。

到目前为止，我已经使用一个小的jquery片段来运行它了，但是我缺少淡入淡出过渡，我需要在悬停时淡出新的'data-src'属性，并在离开时淡出回到'src'图像。

不胜感激，不能完全破解。

  $('img.secondary-swap').bind('mouseenter mouseleave', function() {
      $(this).attr({
          src: $(this).attr('data-src') , 'data-src': $(this).attr('src') 
      })
  });


<img class="secondary-swap"
    src="{{  product.featured_image }}"
    alt="{{ product.featured_image.alt | escape }}"
    data-src="{{  product.images[1] | img_url: '250x' }}"
/>