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

Question

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

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

而不是......

1. 淡出图片
2. 更改Src
3. 淡入新图片

Javascript不会等待fadeout完成，这就是你看到的......

1. 更改图片src
2. 淡出
3. 淡入

我错过了什么吗？另外这里还有一个奖励，... JQuery允许我淡化为白色以外的其他颜色，或者我是否应该使用典型的hackery来解决这种情况？

Answer 1

完成后，

.fadeOut接受回调。淡出后你可以放置你想要的任何东西。

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

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

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

实际上，代码更少。

Answer 2

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

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

Answer 3

尝试：

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

Answer 4

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

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

如果使用淡入淡出颜色表示CSS颜色，那么除非使用CSS3过渡，否则必须使用jQuery UI（或其他一些插件）来设置颜色变化的动画。