如何让一些JavaScript / jQuery按顺序运行

Question

我有一个包含两个分区的HTML文件。其中一个名为“welcome”，另一个名为“welcome_distort”。

导入jQuery后，我有一个单独的js文件，其中包含一些对这些div进行操作的代码。

$("#welcome").fadeTo(50,0.1);
$("#welcome").fadeTo(10,1.0);
$("#welcome").fadeTo(10,0.1);
$("#welcome").fadeTo(10,1.0);
$("#welcome").fadeTo(1000,0.0);

$("#welcome_distort").css({opacity:"1.0"});

所有fadeTo（）命令都按顺序工作。我想要发生的是在这些fadeTo（）之后的css（）命令。实际上，welcome_distort上的操作与第一次欢迎操作同时进行。我的问题是：如何让.css（）操作在最后一个.fadeTo（）之后运行。

非常感谢， 约翰

Answer 1

fadeto有一个回调选项，在动画完成后运行。我的代码来自：http://api.jquery.com/fadeTo

$('#welcome').fadeTo(1000,0.0, function() {
      $("#welcome_distort").css({opacity:"1.0"});
    });