How can I add effect to an image after using the attr() in jQuery?

Question

Situation

I have a btn and image . I want to change the src of the image when the user click on the btn.

Then, I want to add a little effect to it like fadeIn('slow');

---

I've tried

appending my fadeIn('slow'); at the end of my attr() , but I don't any effect taking place.

$('#id').click(function(e) {
    e.preventDefault();

    $('#img').attr('src','/path/car.png').fadeIn('slow');  <-----HERE

});

---

I've also tried

moving my fadeIn('slow'); to the next line, but I don't any effect taking place either.

$('#id').click(function(e) {
    e.preventDefault();

    $('#img').attr('src','/path/car.png');
    $('#img').fadeIn('slow');  <-----HERE

});

Can someone please help me correct this ?

Answer 1

first use fadeOut , once complete use fadeIn

 $('#id').click(function(e) { e.preventDefault(); $('#img').fadeOut('slow', function(){ $('#img').attr('src','http://icons.iconarchive.com/icons/crountch/one-piece-jolly-roger/256/Zoro-icon.png').fadeIn('slow'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="id">Click me</button><br /> <img id="img" src="http://icons.iconarchive.com/icons/crountch/one-piece-jolly-roger/256/Luffys-flag-icon.png" /> 

Answer 2

Here I did an example where you can change the image's src more than once:

example

$("#b1").on("click", function(){
    $("img")
        .finish().hide() // pay attention on this line -> it will end any fadeIn and then hide to do a new fadeIn
        .attr("src", "https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg")
        .fadeIn(2000);
});

$("#b2").on("click", function(){
    $("img")
        .finish().hide() // pay attention on this line -> it will end any fadeIn and then hide to do a new fadeIn
        .attr("src", "http://blogs.psychcentral.com/life-goals/files/2014/09/cute-dog-pup.jpg")
        .fadeIn(2000);
});

$("#b3").on("click", function(){
    $("img")
        .finish().hide() // pay attention on this line -> it will end any fadeIn and then hide to do a new fadeIn
        .attr("src", "http://upload.wikimedia.org/wikipedia/commons/1/13/Clyde_The_Bulldog.jpg")
        .fadeIn(2000);
});

Hope it helps.