使用jQuery逐漸淡入2 li's

試圖淡化2個li在列表中一次褪色如何完成此操作。我應該有多個計數器嗎？使用不同的功能而不是切片？我迷路了。任何幫助表示讚賞。謝謝。使用jQuery逐漸淡入2 li's

這裏是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

來源

2013-08-06 souporserious

哪裏都是爲計數器變量的解決方案？ – putvande

你到底在做什麼，只顯示前兩項#listed？ – dezman

@watson我想一次褪色2。所以褪色1,2然後3,4然後5,6。 – souporserious

有很多方法可以做到這一點。一種方法是使用slice()和setInterval()。保持跟蹤你的位置var和清除間隔當您完成：

$(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

或者更緊湊，使用for循環，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

來源

2013-08-06 22:58:48

比我去過的要乾淨得多。很好，謝謝！ – souporserious

而不是使用listItems.slice(counter1,counter2)使用listItems.splice(0,2)的。

來源

2013-08-06 22:58:33 putvande

使用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

來源

2013-08-06 23:02:02

偉大的工作！感謝你的回答。 – souporserious

使用jQuery逐漸淡入2 li's

回答

相關問題