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的链接 - ＆gt; 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：您也可以将它们发送到display:none;并使用jQuery's fadeIn()

使用jquery制作动画异步/同步的简洁方法

1 个答案: