jQuery的.each（）方法是并行还是按顺序运行它的语句？

在我的HTML页面，我有4个列表项和下面的jQuery代码：jQuery的.each（）方法是并行还是按顺序运行它的语句？

$('li').hide().each(function() { 
    $(this).delay(500).fadeIn(1000); 
});

我假设。每个（）函数中的语句将运行第一个列表项，将完成，然后运行第二个列表项等。

但是，所有四个列表项完全同时淡入。这是否意味着该声明对所有列表项并行运行？

有没有办法让列表项一次褪色？

来源

2016-05-14 Madeleine Smith

它们按顺序运行，您的示例只是因为使用了delay/fadeIn而给出了它们同时运行的错觉。你想要做的是链接每个元素的淡入淡出，以便下一个元素只会在前一个元素完成后才会淡入淡出。你可以做这样的事情：

$(this).delay(500).fadeIn(1000, function() { 
     // Fade the next li... 
    });

当然，这不会对上述特定的代码示例工作（你可能会想摆脱的。每次和内获取每个li元素以不同的方式完整的回调函数）

来源

2016-05-14 22:47:39 code4pi

很难规模很多项目没有使用一个循环 – charlietfl

由于动画是异步的，循环不等待每继续下一次迭代之前完成

循环将完成在短短几毫秒所以每个项目都会有相同的视觉延迟。

要增加，最简单的是如此有效地将他们全部错开

$('li').hide().each(function(i) { 
    // "i" is array index of current instance 
    // delays will thus be 0*500 ... 1*500 .... n*500 
    $(this).delay(i*500).fadeIn(1000); 
});

来源

2016-05-14 22:56:00 charlietfl

在第一次迭代时'i'是'0'会在'i * 500'产生'0'而不是'500'的预期延迟？ – guest271314

使用循环指数乘数可以使用.queue()，.dequeue()，.next()调用函数的顺序

$("li").hide().queue(function() { 
 
    $(this).delay(500).fadeIn(1000, $.proxy($.fn.dequeue, $(this).next())) 
 
}).first().dequeue()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<ul> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li>d</li> 
 
</ul>

来源

2016-05-15 04:06:59 guest271314

jQuery的.each（）方法是并行还是按顺序运行它的语句？

回答

相关问题