CODEWITHSUNDEEP
javascriptjquery
Mike Barwick
Mike Barwick

Reputation: 5367

$.each function to show each DIV, one at a time

I have the following function. To make a long story short, I have 4 divs that I want to apply an init class to. The init class essentially shows the 4 divs.

It works as it should, however it shows all 4 divs at the same time, which is not what I want. I want to show 1 div, then the next, then the next, etc.

Where am I going wrong?

$('.campaign-item').waypoint({                          

    handler: function() {

        var $this = $(this);

        $this.each(function(i) {

            setTimeout(function() {
                $this.addClass('init');
            }, i * 500 );
        });                         
    },
    offset: '60%'
});

Upvotes: 0

Views: 83

Answers (3)

PhistucK
PhistucK

Reputation: 2546

$('.campaign-item').each(function (i) {

    var $this = $(this);

    $this.waypoint({
        handler: function() {
            setTimeout(function() {
                    $this.addClass('init');
            }, i * 500 );                                                         
        },
        offset: '60%'
    });
});

Upvotes: 3

Steve Mc
Steve Mc

Reputation: 3441

I think your problem is that a jQuery object contains a collection of the objects that match your selector. "$(this)" is that collection. The "each" function gives you access to the individual elements in that collection with the returned second parameter ("function(index, element)"). In your code you are trying to add your "init" class to every member of the collection because "$this" IS the entire collection. You need to add the class to the second parameter returned in each iteration of your each function.

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227220

You need to add the class to each individual element, not to all of them.

var $this = $(this);
$this.each(function(i,v){
    setTimeout(function(){
        $(v).addClass('init');
    }, i * 500 );
});

Upvotes: 3

Related Questions