> Now could you explain it to me how does the code works ?
Yeah, it is kind of crazy... :-)
> var $sequence = $('div[id$=_div]').hide()
Grabs all the divs and hides them, then assigns the jQuery object with
all the divs to the $sequence variable.
> , div = 0;
Just sets the div variable to 0.
> (function(){
> ...
> })();
Defines an anonymous function, and calls it immediately. That is done
by enclosing the function in parens and adding the parens at the end
to call it with no arguments.
> $($sequence[div++]).fadeIn('slow', arguments.callee);
Each time the anonymous function is called, it selects a single div
from the jQuery object using $sequence[div++]. That also increments
the div variable so that it will get the next div the next time it's
called.
$($sequence[div++]).fadeIn('slow', ...); creates a new jQuery object
out of that element and calls fadeIn on that element.
arguments.callee is a reference to the current anonymous function that
we are in. So when the fadein is done it will call the same function,
which will select the next div in $sequence. So it's kind of like a
recursive call.
I realized I haven't handled the termination quite right. When we run
out of divs, $sequence[div++] will return undefined; I was thinking
that would return an empty jQuery object but $(undefined) selects the
document object. That will fadeIn document continuously. An easy fix
is to just skip the fadeIn if we're at the end of the list:
(function(){
if ( div < $sequence.length )
$($sequence[div++]).fadeIn('slow', arguments.callee);
})();
If you prefer the one-liner you could do this instead:
(function(){
$($sequence[div++] || []).fadeIn('slow', arguments.callee);
})();
When $sequence[div++] returns undefined it will use the empty array
which returns an empty jQuery object, which means the chained fadeIn
never runs and that stops the kinda-recursive call to the anonymous
function through arguments.callee.
