javascript - jQuery:将效果应用于 jquery 集合中的每个元素并暂停

Question

我有一个由 $('.line') 返回的集合。它有 6 个元素，我希望它们隐藏起来，然后从第一个元素到最后一个元素出现，只有当前面的元素完成动画时，才会开始出现一行。

function animateLines(lines) {
       lines.toggle(function(){});
           lines.each(function(i, line){
                setTimeout( $(this).toggle(function(){}), 3000);
            });

}

这使得线条全部消失，然后同时出现。我做错了什么？

Answer 1

那么您只需更改传递给 setTimeout 的超时参数即可。您还需要将函数传递给 setTimeout，而不是立即调用 toggle。

试试这个:

function animateLines(lines) {
   lines.toggle();
   lines.each(function(i, line){
       setTimeout(function(){ $(line).toggle(); }, 3000 * (i + 1));
   });
}

Demonstration