Прокрутите элементы списка навигатора и увяжите их с использованием анимации fadeIn() jQuery.

Question

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

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

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

Как можно осуществить такой эффект?

Answer 1

$('#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. 
}); 

Answer 2

Проверить эту скрипку: 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()

Answer 3

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

(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+), но идея этого подхода заключается в том, чтобы ждать конца fadein на n-й позиции, а затем повторите функцию после time миллисекунд на n+1-м изделии.

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