jQuery:如何使用img.attr('src', 'img.png')对图像源的更改

jQuery: How to animate (fade) change of image source using img.attr('src', 'img.png')?

本文关键字:img 图像 png attr src jQuery 何使用      更新时间:2023-09-26

所以使用 jQuery 我使用 img.attr('src', 'img.png') 更改图像的来源。

这只是更改源并以非常静态的方式更新图像,而无需执行任何动画,例如淡入淡出。

我将如何为这种图像变化设置动画?

希望这会有所帮助。当我遇到这个问题时,在某处看到了这个解决方案。

$("#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>

出图像,当图像不可见时,更改其来源:

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