CODEWITHSUNDEEP
jquery
Sean Johnson
Sean Johnson

Reputation: 303

Using jQuery to make a group of images appear in order

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?

Upvotes: 0

Views: 203

Answers (3)

Sean O
Sean O

Reputation: 2619

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);
});

Upvotes: 0

Vishal Seth
Vishal Seth

Reputation: 5048

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

Upvotes: 0

gnarf
gnarf

Reputation: 106332

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));  
});

Upvotes: 2

Related Questions