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（）方法是並行還是按順序運行它的語句？

回答

相關問題