在jQuery中使用attr（）之后如何为图像添加效果？

Question

情况

我有 btn 和图片。 我想在用户点击btn时更改图像的src。

然后，我想像fadeIn('slow');

那样添加一些效果

我试过

在fadeIn('slow');结束时附加我的attr()，但我没有任何效果。

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

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

});

我也试过

移动我的fadeIn('slow');到下一行，但我也没有任何影响。

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

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

});

有人可以帮我纠正一下吗？

Answer 1

首次使用fadeOut，完成后使用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

这里我做了一个例子，您可以多次更改图像的src：

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);
});

希望它有所帮助。