Question

有没有人可以解释这个jQuery代码片段是如何工作的？

这是html

<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>


$(".faded").each(function(i) {
    $(this).delay(i * 400).fadeIn();
});

我有点想弄清楚这部分是如何运作的

$(this).delay(i * 400).fadeIn();

Answer 1

代码循环遍历div并根据其顺序延迟fadeIn函数。也就是说，第一个div在1 * 400ms延迟后退出，第二个2 * 400ms延迟等。

Answer 2

相当于：

$(this).delay(1 * 400).fadeIn();
$(this).delay(2 * 400).fadeIn();
$(this).delay(3 * 400).fadeIn();
$(this).delay(4 * 400).fadeIn();
$(this).delay(5 * 400).fadeIn();
// as long as there are elements in the wrapped set

所以基本上每个div都会在i的延迟值乘以400后显示，使每个div显示的时间晚于第一个。

Answer 3

每个函数遍历与选择器匹配的所有元素（'faded'类）。i参数是元素的索引号。

由于它们按此顺序排列，每一个都会延迟400秒，因此它们一次淡入一个。

如果您愿意，可以在此处进行试验：http://jsfiddle.net/gfosco/Wx6Qr/

Answer 4

$(this).delay(i * 400).fadeIn();

delay(i * 400)将等待400毫秒x i，所以第一个等待400毫秒，第二个等待800毫秒......

然后，该块将淡入。

Answer 5

一个接一个地淡化div，其中delta为400ms

以下是延迟功能的官方文档：

http://api.jquery.com/delay/

Answer 6

DIV将每0.4秒一次一个地消失......

Answer 7

解释它的最简单方法是使用它创建jsfiddle，以便您可以实时查看。

当您.each超过数组时，i将成为数组中当前元素的索引。因此，它只是在元素之前稍微淡化每个元素。

你能为我解释这个jQuery代码吗？

7 个答案: