Fade in 2 li's за один раз с jQuery

Question

Попытка исчезнуть в 2 литах за раз в списке, запутавшись в том, как это сделать. Должен ли я иметь несколько счетчиков? Использовать другую функцию вместо среза? Я потерялся. Любая помощь приветствуется. Благодарю.

Вот JS:

$(function() { 
    var listItems = $('#listed li'), 
     counter1 = 0, 
     counter2 = 0, 
     counter3 = 2, 
     listLen = listItems.length; 

    function fadeList() { 
     listItems.slice(counter1,counter2).fadeIn(1500, function() { 
      counter1++; 
      counter2+=2; 
      counter3+=2; 
      if (counter < listLen) 
       fadeList(); 
     }); 
    } 
    fadeList(); 
}); 

Проверить это жить здесь: http://jsbin.com/iteri/424/edit

Answer 1

Существует несколько способов сделать это. Один из способов - использовать slice() и setInterval(). Держите вар, который отслеживает ваше местоположение и очистить интервал, когда вы сделали:

$(function() { 
    var i=0; 

    var lis = $('#listed li'); 

    var interval = setInterval(function() { 
    lis.slice(i,i+2).fadeIn(1500); 

    i += 2; 

    if(i+1 > lis.length) { 
     clearInterval(interval); 
    } 
    }, 1000); 
}); 

Live Demo

Или более компактным, используйте цикл, slice() и delay():

$(function() { 
    var lis = $('#listed li'); 

    for(var i=0; i<lis.length; i+=2) { 
     lis.slice(i, i+2).delay(i*300).fadeIn(1500); 
    } 
}); 

Live Demo

Answer 2

Вместо использования listItems.slice(counter1,counter2) использования listItems.splice(0,2).

Answer 3

Раствор с использованием for петли

$(function() { 
    var lis = $('#listed li'); 
    for(var i =0; i <= lis.length; i+=2) 
     lis.filter(':eq('+i+'),:eq('+(i+1)+')').delay(i*500).fadeIn('500'); 
}); 

Demo