Question

This is perhaps a couple of questions rolled into one here, I am creating an image gallery and wanted the thumbnails to fade in on the page one after another, this needs to be dynamic to the amount of images within a div (for reuse on the other gallery pages)

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


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

}});

This displays the images all at the same time on load:(

Also is there a better way to do element collection in jQuery I couldn’t find anything about using the array needed for the image tags

Any help on this would be appreciated, am hitting a mental block on this

Answer 1

You can just add a .delay() to each, like this:

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

I’m not sure when your class should be added though, you can do it immediately or .queue() it, depending on if it should happen just before the fade. This fades in the first immediately, the second 600ms later (when the first fade finishes), the next after that, etc. If you want overlap just lower that 600 (which is what 'slow' is).

To add the class immediately, fade one by one:

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

Or, to add it just before fading:

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