Перебирайте элементы списка навигационной панели и уменьшайте их, используя анимацию jQuery fadeIn () - PullRequest
Новая
       45

Перебирайте элементы списка навигационной панели и уменьшайте их, используя анимацию jQuery fadeIn ()

1 голос
/ 16 декабря 2011

То, что я хотел бы сделать, это перебирать элементы списка навигации и постепенно добавлять каждый элемент, но с гибкостью, имеющей две опции задержки: возможность ждать завершения каждой предыдущей анимации, прежде чем продолжить сследующая анимация и / или пользовательская задержка / время ожидания (миллисекунды) между началом каждой анимации (не задержка между окончанием одной анимации и началом следующей анимации).

Естественно, я мог бы использоватьвложенные обратные вызовы и вызывают каждый элемент списка отдельно, но это довольно неэффективно с точки зрения кода, и будет загружать каждый элемент только один за другим, что в некоторых случаях нормально, но в других я мог бы хотеть, чтобы они загружались почти одновременно, свозможная небольшая задержка (чтобы подражать некоторым из основанных на Flash переходов, которые я видел).Hense, почему я говорю, что пользовательская опция задержки должна быть между началом одного и началом следующего.

Для чего бы то ни было, элементы навигации сначала скрываются через $('#nav li').hide();, но я подозреваю, что выуже догадался, что это может быть так.:)

Как можно добиться такого эффекта?

Ответы [ 3 ]

4 голосов
/ 16 декабря 2011 
$('#nav li').each(function(index, element) {
    $(element).delay(index*50).fadeIn(400); // delays each subsequent fade by 50ms.
    // Change 50 to match the duration of the fade and they will fade in one after the other.
});
0 голосов
/ 16 декабря 2011

Я предлагаю простую итерацию, подобную этой 

(function(wait, speed) {

  var itm = $('#nav li'),
      len = itm.length,
      index = 0;

  (function sequentialFade() {
      $.when( itm.eq(index).fadeIn(speed) )
       .done(function() {
           if (index++ === len) return false;
           setTimeout(function() {
               sequentialFade()
           }, wait);
       })
  }());


}(1000, 200))

В этом случае я использовал отложенные объекты (jQuery 1.5+), но идея этого подхода заключается в том, чтобы дождаться окончания фейдинга n-го элемента и затем выполнить итерацию функции через time миллисекунд n+1 й пункт.

a Пример JsFiddle: http://jsfiddle.net/McLZ4/3

0 голосов
/ 16 декабря 2011

Проверьте эту скрипку: http://jsfiddle.net/bPbw4/7/

Предположим, ваш HTML-код выглядит следующим образом: 

<ul>
    <li>Item-1</li>
    <li>Item-2</li>
    <li>Item-3</li>
</ul>

Тогда ваш JS-код для последовательной анимации может выглядеть примерно так: 

var currentLi = null;

var speed = 1000;
var gap = 500;

function doNext() {
    if(currentLi==null) {
        currentLi = $('ul li:first');
    }
    else if(currentLi.next().length!=0) {
        currentLi = currentLi.next();
    }
    setTimeout(function() {
        currentLi.fadeIn(speed, doNext);
    }, gap);
}

doNext();

В приведенном выше коде speed - это скорость анимации, а gap - задержка между каждым fadeIn()

.
...