How can I overlap div fenderIn () in jquery?

Question

Here's a template fiddle that gradually fades into 6 divs .

How can I make overlapping fadeins? I want the next div to start fading halfway through the first fading.

Perhaps I need to divide fadeIn () into 2 attenuation, disappear halfway, and then fade away the rest of the way?

Answer 1

.fadeIn('slow') duration is 600 milliseconds, so you can do a 300 millisecond delay.

You should write this in a simpler way using .delay , as shown below, and you can change 300 to a different number to adjust the speed.

 var i=1; for (i = 1; i <= 6; i++) { $('#div' + i).delay((i-1)*300).fadeIn('slow'); } 

Answer 2

or you can use setTimeout with a time that is half the time used for fadeIn