jQuery：如何使用img.attr（'src'，'img.png'）动画化（淡入）图像源变化？

Question

因此，使用jQuery可以使用img.attr('src', 'img.png')更改图像的来源。

这只是改变了源并以非常静态的方式更新了图像，而没有进行任何淡入淡出的动画处理。

我将如何为这种图像变化制作动画？

Answer 1

希望这会有所帮助。 遇到此问题时，在某处看到了此解决方案。

 $("#link").click(function() { $("#image").fadeOut(1000, function() { $("#image").attr("src",$("#link").attr("href")); }).fadeIn(1000); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg"/> <a id="link" href="http://www.google.com/logos/2011/mothersday11-hp.jpg">Change picture</a> 

Answer 2

淡出图像，并在图像不可见时更改其来源：

$('#myImg').fadeOut().queue(function() {
   var img = $(this);
   img.attr('src', newSrc);
   img.fadeIn();
   img.dequeue();
});