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

Jquery fadeIn / fadeOut img change

3 个答案: