Question

我想构建我的JQuery，一次淡出每个项目。这是an example of the behavior，这是我到目前为止的JQuery：

$('li').css('display', 'none') .delay(1000).fadeIn(800)

Answer 1

这可能不是最好的解决方案，但应该有效：

$('li').each(function(i){
  var el = this;
  setTimeout(function(){
    $(el).fadeIn(800);
  },800*i)
});

只是为了好玩，一个递归版本：

function animateLi(i){
  $('li').eq(i).fadeIn(800);
  if ($('li').eq(i+1).length>0)
  {
      setTimeout(function(){animateLi(i+1)},800);
  }
}
animateLi(0);

Answer 2

也许是这样的：

var delay = 500, t = 0;
$("li").css('display', 'none').each(function(){
  t += delay;
  var $li = $(this);
  setTimeout(function(){
    $li.fadeIn();
  },t);
});

Answer 3

遍历li，并使用setTimeout为该li排队动画。

$('li').each(function () {
    var li = this;
    animateLi = function () {
        li.fadeIn(800);
    }
    setTimeout(animateLi, timeout);
    timeout += 100;
});

Answer 4

Ivans方法略有不同

$(function() {
    $('ul li:hidden').each(function(idx) {
        setTimeout(function(el) {
            el.fadeIn();
        }, idx* 1000, $(this));
    });
});

使用fadeIn回调函数而不是setTimeout

的递归函数

function DisplayOneByOne(){
    $('ul li:hidden:first').fadeIn('2000',  DisplayOneByOne);
}

Answer 5

以下是您的操作方法：

var delay = 200, t = 0;
$("li").css('display', 'none').each(function(){
    t += delay;
    var $li = $(this);
    setTimeout(function(){
        $li.fadeIn(1900);
    },t);
});

Answer 6

还有另一种方法可以逐渐淡化元素：

$.fn.fadeInNext = function(delay) {
    return $(this).fadeIn(delay,function() {
        $(this).next().fadeInNext();
    });
};

$('li').hide().first().fadeInNext(1000);

使用JQuery动态加载列表项

6 个答案: