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

回答

相关问题