jquery plusieurs boutons moveDown avec un retard pour chaque bouton

Question

Je possède ce 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. J'ai essayé avec jquery.slideDown et je n'ai pas obtenu le résultat attendu. Alors j'ai essayé avec .animate mais les boutons bougent tout à la fois sans délai entre eux.

C'est ce que j'ai 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 don Je ne sais pas où mettre le retard.

Je suis nouveau avec jQuery.

Aidez-nous!

Answer 1

slideDown fournit un rappel méthode à exécuter 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 qui est probablement plus ce que vous cherchez pour):

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

le 100 dans ind * 100 est le délai entre chaque.

Answer 2

Essayez quelque chose comme ceci. Voici un live demo

$(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);