[Résolu] Afficher des éléments successivement en jQuery

Bonjour,

J'ai une <ul> contenant des <li>. Je souhaiterai afficher la <li> suivante une fois que la précédente <li> est chargé.

J'ai essayé différentes manière, mais actuellement, le code me charge toutes les images d'un coup. C'est suffisant, mais j'aimerai un meilleur effet ^^.

var thumb = $('#portfolio ul li');
thumb.fadeTo("slow", 1);

Merci d'avance de vos réponses.
Modifié par nova313 (14 Mar 2013 - 21:37)

Salut, tu peux essayer ainsi: http://jsbin.com/ezusid/5/edit

(function() {
  
  var elems = $('li').get();
  
  function animateLi() {
    var animated = elems.splice(1, 1);
    $(animated).fadeTo('slow', 1);
    setTimeout(animateLi, 100);
  }

  animateLi()
  
}());

Ensuite suffirait d'ajuster pour l'effet voulu.
Modifié par SBoudrias (14 Mar 2013 - 04:26)

Ca marche super, Merci.

J'aurai juste 2 questions:

- Si je passe dans la variable le chemin complet $("#block ul li"), le premier <li> ne s'affiche pas. Par contre, si je laisse $("li"), ça marche. Il vaut mieux utiliser le chemin complet, sinon cette function va s'adresser à tout les <li> ?

- Pourquoi utiliser un .get() ?

Merci.

Salut,

Oui ça marchera pareil avec le chemin complet. Cela dit, "ul" est totalement inutile, et ce sera plus rapide en sélectionnant `$('#foo').find('li')`

Voici un exemple: http://jsbin.com/ezusid/10/edit

.get() retourne un Array des DOM nodes. Je l'utilise parce que je voulais un véritable array afin d'utiliser `.splice()` directement. Peut-être qu'on aurait pu appeller `.splice()` à partir du prototype en passant l'object jQuery en tant que valeur pour `this`, mais je n'étais pas certain du résultat - et le code aurait été plus cryptique.

Merci pour l'explication .get().

Par contre, j'avais un problème ou la première <li> ne s'affichait pas. Mais au lieu de d'attribuer un display:none, j'ai préféré utiliser une opacity:0.

Encore merci pour ton aide.

Salut, le premier <li> n'apparait pas parce que j'ai utilisé l'index `1` dans la méthode slice. Comme les array en javascript commence à l'index 0, c'est ce chiffre qu'on aurait du utiliser: http://jsbin.com/ezusid/14/edit