jquery - 使用 jQuery 一次淡入 2 li

Question

试图在列表中一次淡入 2 li 对如何完成此操作感到困惑。我应该有多个柜台吗？使用不同的功能而不是切片？我迷路了。任何帮助表示赞赏。谢谢。

这是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()and 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

Answer 2

使用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');
});

演示

Answer 3

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