CODEWITHSUNDEEP
javascriptjquery
wilsonrufus
wilsonrufus

Reputation: 449

FadeIn is not giving proper timing

I have 3 divs I want to show each of them 1 sec apart. But that does not seem to happen . What is actually happening in the loop. Please explain!!Currently all the divs appear together. But i want to show them one at a time. I want the second DIV to appear after the first div has appeared.

http://jsfiddle.net/wilsonrufus/TUL6s/

var blockOne = $('#block1');
blockInner = blockOne.find('.inner-block');
blockInner.fadeOut();

blockInner.each(function (index, value) {
    time = 2000+(index*5000);  <- just expermenting
    $(this).fadeIn(time);
    console.log(time)
});

Upvotes: 0

Views: 45

Answers (2)

AntouanK
AntouanK

Reputation: 4978

Try chaining and use a callback function to handle each time the fadeIn of the next element

http://jsfiddle.net/blackjim/TUL6s/1/

var blockOne = $('#block1');
blockInner = blockOne.find('.inner-block');

var fadeNextIn = function(){
    if($(this).next()){
        $(this).next().fadeIn(1000,fadeNextIn);
    }
}

blockInner.fadeOut('slow')
          .first().fadeIn(1000,fadeNextIn);

Upvotes: 3

Johan
Johan

Reputation: 35194

Use delay if its not the first div:

blockInner.each(function (index, value) {
    $(this).delay(index > 0 ? 2000*index : 0).fadeIn(2000);
});

http://jsfiddle.net/TUL6s/5/

Upvotes: 2

Related Questions