jquery multiple buttons movedown with a delay for each button

Question

I have this html:

<div id="navbar">
  <ul>
    <li class="active"><a href="#">button1</a></li>
    <li class="inactive"><a href="#">button2</a></li>
    <li class="inactive"><a href="#">button3</a></li>
    <li class="inactive"><a href="#">button4</a></li>
    <li class="inactive"><a href="#">button5</a></li>
    <li class="inactive"><a href="#">button6</a></li>
    <li class="inactive"><a href="#">button7</a></li>
  </ul>
</div>
<div id="slider">
</div>

and i want to do a movedown effect to each button with a delay when the page load. I've tried with jquery.slideDown and I didn't get the expected result. Then I`ve tried with .animate but the buttons are moving all at once without delay beetwen them.

This is what I've get with .slideDown: http://www.specter.uv.ro

this is what I've tried with animate: www.specter.uv.ro/index2.html

var seq = $('li').show(), li = 0;
(function() {
  $(seq[li++]).animate({'margin-top':'20px'}, 300, arguments.callee);
})();

I don't know where to put delay.

I am new with jQuery.

Please Help!

Answer 1

SlideDown provides a callback method to run when the current animation is finished. If your delay is the same length as the animation, you could try something like this (assumes they're hidden from the start):

$(function() {
  $("#navbar li:first-child").slideDown(200, slideNext);
});
function slideNext() {
  $(this).next().slideDown(500, slideNext);
}

You could also try this (which is probably more what you're looking for):

$(function() {
  $("#navbar li").each(function(ind) {
    setTimeout("$($('#navbar li')[" + ind + "]).slideDown(200);", ind * 100);
  });
});

The 100 in ind * 100 is the delay between each.

Answer 2

Try something like this. Here's a live demo

$(function() {
    var delay = 0;
    var duration = 2000;
    $("#navbar li").hide().each(function() {
       $(this).delay(delay).slideDown(duration);
       delay += 1000; 
    });
});

If, as Zain's comment suggests, you don't want a different delay for each button, you can replace the bulk of the above with:

$(#navbar li").hide().delay(delay).slideDown(duration);