Does jQuery.each () method run its statements in parallel or sequentially?

Question

On my HTML page, I have 4 list items and the following jQuery code:

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

I assumed that the statement inside the .each () function would be run for the first element of the list, would be completed, and then it would be run for the second element of the list, etc.

However, all four list items disappear at exactly the same time. Does this mean that the operator works in parallel for all elements of the list?

Is there a way to make list items disappear one at a time?

Answer 1

Since animations are asynchronous, the loop does not wait for each of them to complete before continuing with the next iteration

, ​​ .

, ,

$('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);
});

Answer 2

, , - /fadeIn. , , - , . - :

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

, (, , .each li - )

Answer 3

.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>

Hide result