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

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

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

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


jquery fadein javascript-events
person Werner    schedule 30.03.2010    source источник

Ответы (3)


arrow_upward
17
arrow_downward

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

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

Посмотрите здесь

person Nick Craver    schedule 30.03.2010

arrow_upward
0
arrow_downward

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

function fadeInNext(el){
  if(el.next('li')){
    el.next('li').fadeIn(500,fadeInNext)
  }
}
$('...').fadeIn( 500, fadeInNext )
person Andru    schedule 30.03.2010
comment
Это не сработает... вы не передаете следующий элемент в fadeInNext, в любом случае в jQuery if(el.next('li')) не нужен... если он не найдет ничего, соответствующего селектору, он не запустится. - person Nick Craver; 30.03.2010

arrow_upward
0
arrow_downward

вы можете сделать это.. добавьте каждого дочернего элемента в массив и создайте функцию, которая видит, если длина массива больше 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);
person Adarsh Hegde    schedule 14.03.2015
comment
это не самое лучшее, но, по крайней мере, оно работает. - person Adarsh Hegde; 14.03.2015