Using jQuery to make a group of images appear in order.

Question

I have a page that shows a bunch of thumbnails (around 30), and the client is wanting them to appear one by one, in order, going from left to right on the page. This is what I've tried:

var start_opacity = 500;
$j('.grid-photo').each(function(i) {
    start_opacity = start_opacity + 500;            

    setTimeout(function() {
        $j(i).animate({opacity: 1}, 4000);
    }, start_opacity);  
});

It doesn't seem to know what i is referencing. Any thoughts?

Answer 1

The .each() function passes the index and the element as the arguments of the function. It also calls the function within the context of the element (this points to your element)

You can save a quick variable var $photo = $j(this); inside your .each() and also, you can calculate your setTimeout delay by just taking 500*(i+1). Leaving us with:

$j('.grid-photo').each(function(i) {
    var $photo = $j(this);
    setTimeout(function() {
        $photo.animate({opacity: 1}, 4000);
    }, 500*(i+1));  
});

Answer 2

Here is a jquery plugin that you can use to achieve your purpose:

Answer 3

Looks like a scope issue.

Try:

$j('.grid-photo').each(function(i) {
    start_opacity = start_opacity + 500;            
    var thisImg = $(this);
    setTimeout(function() {
        thisImg.animate({opacity: 1}, 4000);
    }, start_opacity);
});