jquery plusieurs boutons moveDown avec un retard pour chaque bouton

Question

Je cette 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>

et je veux faire un effet movedown à chaque bouton avec un retard lorsque la charge de page. Je l'ai essayé avec jquery.slideDown et je n'ai pas eu le résultat escompté. Alors essayé avec .animate passe mais les boutons sont en mouvement à la fois sans délai les beetwen.

Voici ce que j'obtenir avec .slideDown: http://www.specter.uv.ro

ce que j'ai essayé avec Animer: www.specter.uv.ro/index2.html

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

Je ne sais pas où mettre retard.

Je suis nouveau avec jQuery.

S'il vous plaît Aide!

Answer 1

slideDown fournit une méthode de rappel afin de fonctionner lorsque l'animation en cours est terminée. Si votre retard est la même longueur que l'animation, vous pouvez essayer quelque chose comme ça (en supposant qu'ils sont cachés depuis le début):

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

Vous pouvez également essayer ce (ce qui est probablement plus ce que vous cherchez):

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

Le 100 en ind * 100 est le retard entre chaque.

Answer 2

Essayez quelque chose comme ça. Voici une démonstration en direct

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

Si, comme le commentaire de Zain suggère, vous ne voulez pas un délai différent pour chaque bouton, vous pouvez remplacer la majeure partie de ce qui précède avec:

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