javascript - 在执行下一行之前，Javascript 不会等待函数完成

Question

我正在做一个非常简单的图像更改，假设淡出当前图像，更改图像的 src，然后淡出图像。这是基本代码...

    $("#picViewer").fadeOut("slow");
    document.getElementById("picViewer").src = "myImage.jpg";
    $("#picViewer").fadeIn("slow");

代替 ...

Javascript 不会等待淡出完成，这就是您所看到的......

我错过了什么吗？这里还有一个好处，......JQuery会让我褪色到白色以外的其他颜色，还是我必须使用典型的黑客来解决这种情况？

score 4 · Accepted Answer

.fadeOut完成后接受回调。你可以放置任何你想要在淡出后发生的事情。

回调函数还提供this作为刚刚淡出的元素。您可以重复使用 usingthis而不必再次使用id元素的，以避免id在多个地方对元素的进行硬编码。

此外，您可以链接 jQuery 函数调用。由于attr()返回它修改的对象（$(this)），您可以链接.fadeIn()到淡入相同的元素。

$("#picViewer").fadeOut("slow", function() {
   $(this).attr('src','myImage.jpg').fadeIn("slow");
});

实际上，更少的代码。

score 3 · Accepted Answer

可选的第二个参数fadeOut是一个回调函数，将在元素完成淡出后调用。

$("#picViewer").fadeOut("slow", function() {
   document.getElementById("picViewer").src = "myImage.jpg";
   $("#picViewer").fadeIn("slow");
});

score 0 · Accepted Answer

尝试：

$("#picViewer").fadeOut("slow", function(){
    document.getElementById("picViewer").src = "myImage.jpg";
    $("#picViewer").fadeIn("slow");
});

score 0 · Accepted Answer

动画是异步发生的，所以你要做的是使用动画方法的回调：

$("#picViewer").fadeOut('slow', function () {
   //change image src
   //fadeIn
   ...

如果淡化颜色是指 CSS 颜色，那么除非您使用 CSS3 过渡，否则您必须使用 jQuery UI（或其他插件）来动画颜色变化。

4 回答 4