Элементы списка загрузки динамически с помощью JQuery

Question

Я хотел бы структурировать мой JQuery для постепенного исчезновения в каждом отдельном элементе за раз. Вот an example of the behavior, и вот JQuery У меня до сих пор:

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

Answer 1

Может быть что-то вроде этого:

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

Answer 2

Петля через ли, и использовать SetTimeout очереди анимации для этого ли.

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

Answer 3

Это, вероятно, не самое лучшее решение, но оно должно работать:

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

Небольшое отклонение по методу Ivans d

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