Jquery afficher les images les unes après les autres

Question

Voici peut-être quelques questions en une ici, je crée une galerie d'images et je voulais que les vignettes s'affichent sur la page l'une après l'autre, cela doit être dynamique à la quantité de images dans un div (pour la réutilisation sur les autres pages de la galerie)

$(function { 
var $gallImages = $('#galleryThumbs img'); 


for(i=0; i<=$gallImages.length; i++){ 
    $(document.getElementById('galleryThumbs').getElementsByTagName('img')[i]).addClass('done').fadeIn('slow'); 

}}); 

Cette affiche les images toutes en même temps la charge :(

est là aussi une meilleure façon de faire la collecte des éléments dans jQuery I n'a pas pu trouver quoi que ce soit sur l'utilisation du tableau nécessaire pour les balises d'image

Toute aide sur ce serait apprécié, je frappe un bloc mental sur ce

Answer 1

Vous pouvez simplement ajouter un .delay() à chacun, comme ceci:

$(function { 
    $('#galleryThumbs img').each(function(i) { 
    $(this).delay(i*600).fadeIn('slow') 
    }); 
}); 

Je ne sais pas quand votre classe devrait être ajouté cependant, vous pouvez le faire immédiatement ou .queue(), selon si cela devrait se produire juste avant le fondu. Cela s'estompe dans la première immédiatement, la seconde 600ms plus tard (quand le premier fondu se termine), le suivant après cela, etc. Si vous voulez un chevauchement juste inférieur 600 (qui est ce que 'slow' est).

Pour ajouter la classe immédiatement, Fondu un par un:

$('#galleryThumbs img').addClass('done').each(function(i) { 
    $(this).delay(i*600).fadeIn('slow') 
}); 

Ou, pour l'ajouter juste avant la décoloration:

$('#galleryThumbs img').each(function(i) { 
    $(this).delay(i*600).queue(function(n) { $(this).addClass('done'); n(); }) 
         .fadeIn('slow') 
});