Question

My php code:

for($i = 1; $i < 22; $i++) {

    echo '<div id="number" style="display:none">'.$i.'</div>';

}

My jquery code:

$('#number').each(function() {

    $(this).slideDown("slow");  

})

What’s wrong here? I want to achieve effect when all numbers, each after another would appear. I mean, first of all slides down number 1, after him number 2 and so on. And now only slides down number 1 and after him nothing happens although I use jquery each. Thank you.

Answer 1

First, your PHP needs a change, it’s rendering invalid HTML, so this:

for($i = 1; $i < 22; $i++) {
  echo '<div id="number" style="display:none">'.$i.'</div>';
}

Need to be something like this (or remove the id completely if it’s not needed):

for($i = 1; $i < 22; $i++) {
  echo '<div id="number'.$i.'" class="number" style="display:none">'.$i.'</div>';
}

Then your jQuery should be something like this:

$('.number').each(function(i) {
  $(this).delay(600*i).slideDown("slow");  
});

You can view a demo here

This will show the first immediately, the second 600ms later (speed “slow” = 600ms), the third after 1200ms, etc, so they’ll happen one after the other. All we’re doing is using .delay() and passing the index of the element in the set times the animation duration, so they occur in order.