更改图像源时可以轻松转换

Question

我有一个想要换出的图像，但是我想要设置动画或淡入/淡出转换，这样它就不是硬交换了。如何轻松过渡？

HTML

<div class="workSample"><a href="various.html"><img class="img" src="images/various.png" alt="Various" style="width:100%"></a></div>

和Javascript

$('.img').hover(function(){
    $(this).data('on',
        $(this).attr('src')).attr('src', $(this).data('on').replace(/(\.\w+)$/, "_roll$1")
    );
},function(){
    $(this).attr('src', $(this).data('on'));
});

Answer 1

使用.animate()并更改img的不透明度，然后执行交换，然后.animate()恢复原始不透明度。

使用animate回调来执行交换并重新设置动画以重新进入视图，这样就可以保证图像在交换之前完全透明。