javascript - Jquery 淡入/淡出 img 变化

Question

我一直在尝试修复这个地雷错误大约 3 个小时，搜索了所有内容和任何地方，但找不到答案。

#test 是一个 img 元素。我希望元素首先淡出，然后更改它的图像，然后淡入。但是当我点击它时，它会改变图像，同时淡出，然后淡入已经改变的图像。这里有什么问题？也许我应该使用 animate() 函数或 stop() 或其他什么？真的很迷茫，javascript和jQuery太难了

    $("#test").click(function(){
    ASD = $("#test").attr('alt');
    $("#test").fadeOut(700);
    $("#test").attr('src', ASD);
    $("#test").fadeIn(700);

Answer 1

您需要使用fadeOut的回调，以便等到第一个动画完成后，再替换源并启动第二个动画：

$("#test").on('click', function(){
    var ASD = $(this).attr('alt');
    $(this).fadeOut(700, function() {
        $(this).attr('src', ASD).fadeIn(700);
    });
});

Answer 2

.fadeOut()您应该使用动画结束时调用的回调参数：

  $("#test").click(function(){
    ASD = $("#test").attr('alt');
    $("#test").fadeOut(700, function() {
       $("#test").attr('src', ASD);
       $("#test").fadeIn(700);
    });
  });

Answer 3

使用回调选项fadeOut()。这确保了其他操作只会在 fadeOut 完成后发生：

$("#test").click(function(){
    ASD = $("#test").attr('alt');
    $("#test").fadeOut(700, function() {
        $("#test").attr('src', ASD);
        $("#test").fadeIn(700);
    });
});