CODEWITHSUNDEEP
javascriptjquery
Shivam
Shivam

Reputation: 2248

Fade in elements one after another

Here is my code, it works but I would like to use the loop to clean up the code. Instead of having so many lines of code. I tried replacing the [0] with [i] but it would just make everything fadein together.

JSFIDDLE

var $icons = $('#header li').hide();

for(var i = 0; i < $icons.length; i++) {
    $($icons[0]).fadeIn(function() {
        $($icons[1]).fadeIn(function() {
            $($icons[2]).fadeIn(function() {
                $($icons[3]).fadeIn(function() {
                    $($icons[4]).fadeIn(function() {
                        $($icons[5]).fadeIn(function() {
                            $($icons[6]).fadeIn(function() {
                                $($icons[7]).fadeIn(function() {
                                    $($icons[8]).fadeIn(function() {
                                        $($icons[9]).fadeIn(function() {

                                        });
                                    });
                                });
                            }); 
                        });
                    });
                });
            }); 
        });
    });
}

Upvotes: 0

Views: 116

Answers (3)

shershen
shershen

Reputation: 9993

Try this: 

var $icons = $('#header li').hide();

function doSetTimeout(i) {
      setTimeout(function() { $icons[i].fadeIn('slow'); }, 1000);
    }

for (var i = 0; i < $icons.length; i++){
      doSetTimeout(i);
}

Upvotes: 0

Stryner
Stryner

Reputation: 7318

You could use recursion:

function FadeMe($array, index) {
    if (index >= $array.length) return;

    $array.eq(index).fadeIn(function() {
        if (index + 1 < $array.length) {
            FadeMe($array, index + 1);
        }
    });
}

var $icons = $('#header li').hide();
FadeMe($icons, 0);

Fiddle: http://jsfiddle.net/0v3L0g6t/

Upvotes: 3

Kiran
Kiran

Reputation: 20313

Try this:

$icons.each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

DEMO

Upvotes: 0

Related Questions