Jquery: исчезать несколько элементов один за другим

Question

есть ли какое-либо возможное решение для fadeIn (500) нескольких элементов списка один за другим?

<ul id="list">
 <li>test</li>
 <li>test</li>
 <li>test</li>
 <li>test</li>
 <li>test</li>
</ul>

С уважением, Вернер

Answer 1

Вы можете сделать рекурсивную функцию, которая останавливается, когда не осталось LI, как это:

function fadeLI(elem) { 
  elem.fadeIn(500, function() { fadeLI($(this).next()); }); 
}                            
fadeLI($("#list li:first")​);​

Проверьте это здесь

Answer 2

вы можете сделать это .. добавить каждого ребенка в массив и сделать функцию, которая видит, если длина массива больше 0, затем он получает первый элемент массива и дочерний объект fadeToggle, который, в свою очередь, переключает функцию в пределах fadeToggle и переходит к следующему дочернему элементу .. для получения дополнительной информации о shift () проверьте http://www.w3schools.com/jsref/jsref_shift.asp

var toggleList = [];
$("#container").children().each(function() {
toggleList.push(this);
});

function fadeToggleList(toggleList) {
if (toggleList.length > 0) {
    var currentChild = toggleList.shift();
    $(currentChild).fadeToggle(50, function() {
        fadeToggleList(toggleList);
    });
}
}
fadeToggleList(toggleList);

Answer 3

Вы хотите, чтобы рекурсивная функция проверяла, есть ли другой элемент li, и постепенно увеличивала его, если это так ...

function fadeInNext(el){
  if(el.next('li')){
    el.next('li').fadeIn(500,fadeInNext)
  }
}
$('...').fadeIn( 500, fadeInNext )