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

Question

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

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

代替 ...

1. 淡出图像
2. 更改源代码
3. 淡入新图像

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

1. 更改图片来源
2. 淡出
3. 淡入

我想念什么吗？ 另外还有一个好处，... JQuery允许我淡化为白色以外的其他颜色，或者我必须雇用典型的黑客来解决这种情况？

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

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

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

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