Question

Is there a way to wait for hide function in a loop? I mean if I have this structure in html:

<div class='example'>
    <span> One </span>
    <span> Two </span>
    <span> Three </span>
<div>

And in js I want to do something like this:

$('.example span').each(function(i, span) {
    $(span).hide('slow');
});

I believe js is asynchronous so it will not wait for hide to end, but maybe there is a way which I don’t know to wait until hide animation finishes and continue on next element?

Answer 1

You can use .delay() to run them at the right times, like this:

$('.example span').each(function(i, span) {
  $(span).delay(600 * i).hide('slow');
});

You can give it a try here

All we’re doing here is delaying the next animation 600ms (the “slow” duration) times it’s index, so the first starts instantly (0-based, 0*600=0), the second at 600ms (the first should finish then), the third at 1200ms, etc.