Animer les éléments de la liste avec jQuery

Im essayant de trouver la meilleure façon d'animer une liste d'objets un par un.

Ainsi, par exemple, j'ai un UL avec 7 éléments en elle et quand mon élément déclencheur est cliqué, je veux que chaque élément à s'estomper dans l'un en dessous de l'autre avec un léger retard entre chaque élément.

Toutes les idées seraient appréciés.

Grâce

OriginalL'auteur Giles Butler | 2010-05-12

  1. 9

    Vous pouvez utiliser des pseudo-récursivité:

    function fadeItem() {
    $('ul li:hidden:first').fadeIn(fadeItem);
}

    Cela va s'estomper dans le premier élément masqué, et l'appel lui-même lors de l'animation, les finitions, la décoloration, le deuxième élément.

    Après il disparaît dans le dernier élément, le sélecteur ne correspondent à rien, donc ça va s'arrêter.

    À ajouter un délai entre chaque fade, vous pouvez appeler jQuery retard méthode, comme ceci:

    function fadeItem() {
    $('ul li:hidden:first').delay(500).fadeIn(fadeItem);
}

    Démo

    EDIT: Changé fondu fondu

    Merci à tous pour les réponses les gars, c'est celui que j'ai eu à travailler, mais je suis sûr qu'ils le font tous à peu près de la même façon, je sais jquery peut faire des choses un peu différentes façons etc. Merci encore 🙂

    OriginalL'auteur SLaks

  2. 0
    var slightdelay = 100; //in milliseconds

function fadeOneIn()
{
    $("ul li:not(:visible):first").fadeIn(function() { setTimeout(fadeOneIn, slightdelay); });
}

$("#trigger").click(fadeOneIn);

    OriginalL'auteur Joel

  3. 0

    En supposant que:

    <ul class="fadein">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

    et CSS:

    ul.fadein li { display: none; }

    exécuter:

    $(function() {
  fade_in_next();
});

function fade_in_next() {
  $("ul.fadein > li:hidden:first").fadeIn("slow", function() {
    setTimeout(fade_in_next, 500);
  });
}

    OriginalL'auteur cletus