أزرار متعددة jQuery تم نقلها مع تأخير لكل زر

Question

لدي هذا 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>

وأريد أن أقوم بتأثير eventown على كل زر مع تأخير عند تحميل الصفحة. لقد حاولت مع jquery.slidedown ولم أحصل على النتيجة المتوقعة. ثم حاولت مع .anication لكن الأزرار تتحرك في وقت واحد دون تأخير Beetwen.

هذا ما أحصل عليه مع .slidedown: http://www.specter.uv.ro

هذا ما جربته مع تحريك: www.specter.uv.ro/index2.html

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

لا أعرف مكان وضع التأخير.

أنا جديد مع jQuery.

الرجاء المساعدة!

Answer 1

يوفر Slidedown طريقة رد اتصال لتشغيلها عند الانتهاء من الرسوم المتحركة الحالية. إذا كان تأخيرك بنفس طول الرسوم المتحركة ، فيمكنك تجربة شيء من هذا القبيل (يفترض أنها مخفية عن البداية):

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

يمكنك أيضًا تجربة هذا (والذي ربما يكون أكثر ما تبحث عنه):

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

ال 100 في ind * 100 هو التأخير بين كل.

Answer 2

جرب شيئًا كهذا. ها هو عرض حي

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

إذا ، كما يوحي تعليق زين ، لا تريد تأخيرًا مختلفًا لكل زر ، فيمكنك استبدال الجزء الأكبر من ما سبق بـ:

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