Could you explain this jQuery code for me

Could any one explain how this jQuery code snip开发者_开发问答pet works ?

This is the html

<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>


$(".faded").each(function(i) {
    $(this).delay(i * 400).fadeIn();
});

Im kinda stuck on figuring out how this section works

$(this).delay(i * 400).fadeIn();

The code loops over the divs and delays the fadeIn function based on their order. That is, first div fades in after 1 * 400ms delay, second 2 * 400ms delay etc.

It is equivalent to this:

$(this).delay(1 * 400).fadeIn();
$(this).delay(2 * 400).fadeIn();
$(this).delay(3 * 400).fadeIn();
$(this).delay(4 * 400).fadeIn();
$(this).delay(5 * 400).fadeIn();
// as long as there are elements in the wrapped set

So basically each div is shown after a delay of value of i multiplied by 400 making each div show later than first.

The each function iterates through all of the elements matching your selector (class of 'faded').. The i parameter is the index number of the element.

Since they are in order like this, each one is delayed by an additional 400 seconds so they fade in one at a time.

You can experiment with it here if you like: http://jsfiddle.net/gfosco/Wx6Qr/

$(this).delay(i * 400).fadeIn();

delay(i * 400) will wait for 400ms x i, so it'll wait 400ms for the first, 800ms for the second...

Then, the block will fadeIn.

Fades in the div one after the other with a delta of 400ms

Here is the official documentation of the delay function:

http://api.jquery.com/delay/

The DIVs will fade in one-at-a-time every 0,4 seconds...

The easiest way to explain it would be create a jsfiddle with it so that you can see it realtime.

When you .each over the array, i will be the index of the current element in the array. So, it is just fading each element a little bit after the element before it.