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

淡出imgage和，而形象是无形的，改变它的来源：

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