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

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

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

而不是

淡出图像 更改Src 淡入新图像 Javascript不会等待淡出完成，这就是您看到的

更改图像src 淡出 法丹

---

我错过什么了吗？还有一个奖金。。。JQuery是否允许我淡入除白色以外的其他颜色，或者我必须使用典型的黑客来解决这种情况

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

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

尝试：

---

动画是异步发生的，因此您要做的是使用动画方法的回调：

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

如果您所说的淡出颜色是指CSS颜色，那么除非您使用CSS3转换，否则必须使用jQuery UI或其他插件来设置颜色更改的动画。

。淡出完成后接受回调。你可以把你想发生的事情放在淡出的地方

回调函数还将其作为刚刚淡出的元素提供。您可以重复使用它，而不必再次使用元素的id，以避免在多个位置硬编码元素的id

此外，还可以链接jQuery函数调用。由于attr返回它修改的对象$this，因此可以将.fadeIn链接到同一元素中

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

实际上，代码更少。

为什么要等待？fadeIn/fadeOut功能在异步计时器返回之前设置异步计时器-1因为解释了如何完成此任务。

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