CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Shuzheng
Shuzheng

Reputation: 13850

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

So using jQuery I change the source of an image using img.attr('src', 'img.png').

This just change the source and updates the image in a very static way, without doing any animation like fading.

How would I animate this change of image?

Upvotes: 0

Views: 2878

Answers (2)

zakaiter
zakaiter

Reputation: 439

Hope this will help. Saw this solution somewhere when I faced this issue.

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

Upvotes: 3

kapantzak
kapantzak

Reputation: 11750

Fade out the imgage and, while image is invisible, change it's source:

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

Upvotes: 2

Related Questions