javascript - 使用 jquery 使动画异步/同步的干净方法

Question

大家好，我想知道如何使用 jquery 处理异步/同步(不确定这是否适用于它，但与同步相反)动画？

我知道一种方法，但它很乱:

$("ul li:nth-child(1)").addClass("appear").delay(300).queue(function(next){

$("ul li:nth-child(2)").addClass("appear");
next();

})

// and so on...

所以我尝试使用 for/while 循环，但它似乎不起作用。我在这里缺少什么？

$(document).ready(function(){

var i = 1;

while (i <= $("ul li").length) {

$("ul li:nth-child(" + i + ")").addClass("appear");

i++;
}

})

codepen 链接 -> https://codepen.io/alexyap/pen/KqZErW?editors=1111

Answer 1

简单的版本有很大的改进空间，但它是一个很好的基本示例:

var $ul = $('ul');
for( var i=0; i < $ul.children("li").length; i++){
    setTimeout(function(){
       $ul.children("li:nth-child("+ (i+1) +")").addClass("appear");
    }, i*100);
}

它不会等到前一个完成，它只是循环它并在循环中将它添加到超时。

这就是异步编程发挥作用的地方:for 循环立即循环遍历所有迭代。循环本身根本不延迟。在循环中你设置多个 setTimeouts ，每个延迟都比前一个长 100 毫秒。

如果您不熟悉此逻辑，我强烈建议您在 settimeout 之前、之后和内部添加一个 console.log 以查看代码的工作顺序。

---

PS:您还可以将它们CSS 到display:none; 并使用jQuery's fadeIn()