Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can do it like this: </p> <p><strong>Example:</strong> <a href="http://jsfiddle.net/patrick_dw/T5acF/4/" rel="nofollow">http://jsfiddle.net/patrick_dw/T5acF/4/</a></p> <pre><code>function animateThis() { var length = $('.bars div').stop().each(function(i, val) { $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() { if (i === (length - 1)) { $('.bars div').animate({ height: 0 }, 2000, animateThis); } }); }).length; } $(document).ready(function() { animateThis(); }); </code></pre> <hr> <p><strong>EDIT:</strong> Didn't notice the animation back to <code>0</code>. Fixed with this updated version.</p> <p><strong>EDIT:</strong> Adding <code>.stop()</code> before the new <code>.each()</code> seemed to clean up the issue I was having.</p> <p><strong>EDIT:</strong> Made it a little more efficient by replacing <code>$(this).index()</code> with <code>i</code> (which represents the same index).</p> <hr> <p>I'm obviously not paying close enough attention. You didn't want to animate the height back to <code>0</code>, but rather wanted to delay 5000 milliseconds, then immediately reset.</p> <p><strong>Example:</strong> <a href="http://jsfiddle.net/patrick_dw/T5acF/5/" rel="nofollow">http://jsfiddle.net/patrick_dw/T5acF/5/</a></p> <pre><code>function animateThis() { var length = $('.bars div').each(function(i, val) { $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() { if (i === (length - 1)) { setTimeout(function() { $('.bars div').height(0); animateThis(); }, 5000); } }); }).length; } $(document).ready(function() { animateThis(); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload