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()和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');
});

<强> Demo

Answer 3

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

使用jQuery一次淡入2 li

3 个答案: