jquery mehr Tasten mit einer Verzögerung für jede Taste Movedown

Question

Ich habe diesen 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>

, und ich mag mit einer Verzögerung, wenn der Laden der Seite einen Movedown-Effekt jede Taste zu tun. Ich habe mit jquery.slideDown versucht, und ich habe nicht das erwartete Ergebnis. Dann versuchte ich `ve mit .animate aber die Tasten bewegen sich auf einmal ohne Verzögerung beetwen sie.

Dies ist, was habe ich mit .slideDown bekommen: http://www.specter.uv.ro

Das ist, was ich mit belebtem versucht: www.specter.uv.ro/index2.html

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

Ich weiß nicht, wo Verzögerung setzen.

Ich bin mit jQuery.

Bitte Hilfe!

Answer 1

slidedown bietet eine Callback-Methode ausgeführt werden, wenn die aktuelle Animation beendet ist. Wenn Ihre Verzögerung die gleiche Länge wie die Animation ist, könnten Sie so etwas wie dies versuchen (annimmt sie von Anfang versteckt):

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

Sie können auch versuchen, diese (das ist wahrscheinlich mehr, was Sie suchen):

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

Die 100 in ind * 100 ist die Verzögerung zwischen den einzelnen.

Answer 2

so etwas wie dies versucht. Hier ist eine Live-Demo

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

Wenn, wie ZZainÊs Kommentar schon sagt, Sie nicht wollen, eine andere Verzögerung für jede Taste können Sie den Großteil des ersetzen oben mit:

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