CODEWITHSUNDEEP
javascriptjquery
Mario Legenda
Mario Legenda

Reputation: 759

Jquery fade in element with delay

I have a gallery of images that needs to be fadded in, one by one. That means, after the first faddes in, the second one fades in, then the third, fourth and so on...

I've tried that with...

var object = $('#gallery-id img');
    for(var i = 0; i < object.length; i++) {
        var timeout = window.setTimeout(function() {
            $(object[i]).fadeIn(300);
        },500);
    }

but it doesn't work. Images are not even shown, let alone fadded. What am i doing wrong?

I've also found a stacks answer and tried this...

    var object = $('#lightbox-galerija-id img');
    for(var i = 0; i < object.length; i++) {
        $(object[i]).delay(1000).fadeIn(300);
    }

but that only delays for a second, and displays all of the images at once.

Upvotes: 0

Views: 90

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

Try this:

var object = $('#gallery-id img');
    for(var i = 0; i < object.length; i++) {
        var timeout = window.setTimeout(function() {
            object.eq(i).delay(i*500).fadeIn(300);
        },500);
    }

Upvotes: 1

Related Questions