Charger dynamiquement des éléments de liste avec JQuery

Question

Je voudrais structurer mon JQuery pour qu'il se décolore dans chaque élément individuel à la fois. Voici an example of the behavior, et voici le JQuery je jusqu'à présent:

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

Answer 1

Peut-être quelque chose comme ceci:

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

Answer 2

boucle à travers le li, et utiliser setTimeout pour la file d'attente pour l'animation que li.

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

Answer 3

Ce probablement pas la meilleure solution, mais il devrait fonctionner:

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

Juste pour le plaisir, une version récursive:

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

Une légère variation sur Ivans metho d

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

Et une fonction récursive en utilisant la fonction de rappel fadeIn au lieu de setTimeout

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

Answer 5

Voici comment vous le faites:

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

Answer 6

Il y a une autre façon de disparaître dans les éléments après chaque autre:

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

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