jquery несколько кнопок перемещены с задержкой для каждой кнопки - PullRequest
Новая
       15

jquery несколько кнопок перемещены с задержкой для каждой кнопки

1 голос
/ 06 ноября 2010

У меня есть этот 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>

и я хочу сделать эффект перемещения для каждой кнопки с задержкой при загрузке страницы. Я пытался с jquery.slideDown, и я не получил ожидаемый результат. Затем я попробовал с .animate, но кнопки перемещаются одновременно без задержки.

Это то, что я получаю с .slideDown: http://www.specter.uv.ro

это то, что я пробовал с animate: www.specter.uv.ro/index2.html

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

Я не знаю, где поставить задержку.

Я новичок в jQuery.

Пожалуйста, помогите!

Ответы [ 2 ]

2 голосов
/ 06 ноября 2010

Попробуйте что-нибудь подобное. Вот демо live 

$(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);
1 голос
/ 06 ноября 2010

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 - это задержка между каждым.

...