jQuery array of divs

Question

How can I make all the div elements in a container fade in one after each other without setting a delay for each div inside the container?

Here is my working jQuery code:

        $("#a").animate({opacity: '1'});
        $("#b").delay(100).animate({opacity: '1'});
        $("#c").delay(200).animate({opacity: '1'});
        $("#d").delay(300).animate({opacity: '1'});
        $("#e").delay(400).animate({opacity: '1'});

Fiddle: http://jsfiddle.net/f9poom60/2/

Now if I want to add one more div, I have to add it with a delay in my JavaScript and I have to add it in CSS. I'm pretty sure it can be done in a more simple way.

Mohamed-Yousef · Accepted Answer · 2015-05-12 22:12:12Z

2

$(document).ready(function(){
    $('.container .some-div').each(function(i){
        $(this).delay(i*500).animate({opacity: 1},1000);
    });
});

DEMO HERE

answered May 12, 2015 at 22:12

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2015-05-12 22:10:14Z

2

Simply loop over that class, use index to set delay

$('.some-div').each(function (i) {
    $(this).delay(i * 100).animate({ opacity: '1'});
});

DEMO

answered May 12, 2015 at 22:10

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

codyogden · Accepted Answer · 2015-05-12 22:10:24Z

1

A better way to do this would be using jQuery's .each(). This allows you to loop through any children of .container. Change 400*index to speed up or slow the delay.

$(".container").children().each(function(index) {
    $(this).delay(400*index).animate({opacity:'1'},100);
});

JS FIDDLE

answered May 12, 2015 at 22:10

codyogden

7491 gold badge8 silver badges17 bronze badges

Comments

Jatin · Accepted Answer · 2015-05-12 22:15:46Z

1

Working Example

One way you could do it would be to use an each() loop and fade them in:

Here you go:

$(document).ready(function() { 
   $('#word1, #word2, #word3, #word4, #word5').each(function(fadeInDiv){
     $(this).delay(fadeInDiv * 500).fadeIn(1000);
   });
});

Note I'm supplying a parameter, fadeInDiv, which will increment for each of the three elements (returns 0, 1, 2) and multiplying that by the delay, so you will get the delay incrementing accordingly (0, 500, 1000) etc.

edited May 12, 2015 at 22:15

answered May 12, 2015 at 22:09

Jatin

3,0876 gold badges31 silver badges42 bronze badges

1 Comment

codyogden Over a year ago

This answer still requires editing the JavaScript (add the div's ID) each time an HTML tag is added to .container.

Collectives™ on Stack Overflow

jQuery array of divs

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related