Is there anyway to make this fading effect loop? I want the fade effect to happen until the user has left the page. Also, my first item in the list is fading in and out twice before the function moves on to the next item. Any help would be greatly appreciated.

Thanks!

Erika

For example:
Let’s say we have

var wrapper = $(“#wrapper”)

And we want to fade in each element of the wrapper one after another.

This LOOKS like it would work

for (var i=0; i<$(wrapper).length; i++)
{
$(wrapper[i]).delay(1000).fadeTo(500, 1)
}

It looks like that this code will make each successive element appear after 1000ms. But that's not how javascript works. This code makes everything come up at once. Why? The delay is in terms of the time of script execution. JavaScript executes these scripts lightning fast: It can execute that entire for loop in a tenth of a second. Consequently, JavaScript sees it like this

wait one second and fade in element at index 0
wait one second and fade in element at index 1
wait one second and fade in element at index 2

Which means that the animations are going to happen at the same time, because the for loop was executed so fast.

Since we obviously can't (or shouldn't) slow down how fast JavaScript executes code, there are 2 ways to accommodate this fundamental of JavaScript, and this is where our examples differ.

My way) Have the delay time multiplied by an incremental amount so it increases every loop.

JavaScript will see it this way

wait 1000ms and fade in element at index 0
wait (1000*2)ms and fade in element at index 1
wait (1000*3)ms and fade in element at index 2

Assuming you wanted to wait one second in between each animation.

This looks like

for (var i=0; i<$(wrapper).length; i++)
{
$(wrapper[i]).delay(i*1000).fadeTo(500, 1);
}

However, to have an initial delay, you would have to place in an offsetting value. This offset value has to be applied to every single subsequent execution, otherwise the intervals between the animations won't be even.

That looks like

for (var i=0; i<$(wrapper).length; i++)
{
$(wrapper[i]).delay(i*1000+3000).fadeTo(500, 1);
}

That means that the animations will come in one second after each other with an initial 3 second delay.

Now here is your way, which is MUCH better. This goes along the lines of what we were talking about: If I don't know the methods to get the job done, I can break it down into math concepts.

Your Way)

It seems that javaScript adds callback functions to a queue, while statements in a for loop are executed immediately. My for loop gave the impression of a delay, but in fact all statements generated by the for loop were executed at just about the same time.

But the callback function will not execute until its caller function is completely finished. So while my forloop statements were executed at just about the same time, JavaScript holds off on callback function execution until the calling function is complete. This way, you can use a set a CONSTANT value for delay, because javaScript does not even execute that code until after a period of time.

Hope that makes sense!

So for example, you would have fadeIn(‘slow’).queue(function() {$(whatever).delay(’2000′).dequeue();}).fadeOut(‘slow’);

Whenever I was dealing with looping and delays, I could not get delays to be treated as relative to one another, but only in absolutes in terms of when javascript executes the code.

So putting delays in a for loop or recursive function caused everything to show up at once, just because javascript executes the code so fast. That’s why in my loop I had to multiply eveything by i.

Without the counter, the whole damn thing will show everytime (meaning ALL the children div at once). The i = 0 you obviously know sets the counter at 0. The faders variable is basically returning an array of whatever matched my selection. In this case all the children of the container div. So I basically have an array of [div, div, div]. The first time the function runs through, it does the whole fading thing on the index of 0 (first div), hits the arguments.callee, which says run the damn thing again, this time ‘i’ gets incremented to 1 (2nd div) and the process repeats until it gets through the array.

Whew….thank you for actually making me explain that, it solidified what I was thinking. Does that make sense now?