Iterating over a list

Hi, real simple problem, but I am struggling to find a solution. I
have an array:

var arr = [ "one", "two", "three", "four", "five" ];

and I want to fade the values in and out, moving on to the next one.
I've tried 'jQuery.each()', for loops, and so on, but I either get the
last one of the list fading in and out over and over, or it doesn't
work at all.

What I tried first was:

$(document).ready(function(){
var arr = [ "one", "two", "three", "four", "five" ];

jQuery.each (arr, function() {
$('#box_content').text(this).fadeIn().fadeOut();
});
});

Now, I'm up to this:

$(document).ready(function(){
var arr = [ "one", "two", "three", "four", "five" ];

for (i=0; i<5; i++)
{
$("#box_content").fadeOut('slow').fadeIn('slow', function () { $
(this).text(arr[i]); });
}
});

I think what's happening on a lot of attempts is that the loop is
going on through, and not waiting for the function. So, I was hoping
that putting it in the callback would solve that.

I've done a lot of ajax with jquery, but evidently, I need to brush up
on my animation stuff.

Thanks for your help.
-Greg

When you start an animation like fadeIn() the animation starts in the
background and the script goes on without waiting the animation ton
complete, so with your each you're changing the texts one by one blazingly
fast even before the first fadeIn() completes.

What you might want instead is something like this :

var recursive_anim = function(list, step, target, duration) {
if (list[step]) {
target(text).fadeIn(duration, function() {
$(this).fadeOu(duration, function() {
recursive_anim(list, step + 1, $(this), duration)
});
});
}
};

fadeIn() and fadeOut() callbacks are triggered as the animation completes.

Michel Belleville


2009/11/8 gthorne <gthorne (AT) gmail (DOT) com>

Hi, real simple problem, but I am struggling to find a solution. I
have an array:

var arr = [ "one", "two", "three", "four", "five" ];

and I want to fade the values in and out, moving on to the next one.
I've tried 'jQuery.each()', for loops, and so on, but I either get the
last one of the list fading in and out over and over, or it doesn't
work at all.

What I tried first was:

$(document).ready(function(){
var arr = [ "one", "two", "three", "four", "five" ];

jQuery.each (arr, function() {
$('#box_content').text(this).fadeIn().fadeOut();
});
});

Now, I'm up to this:

$(document).ready(function(){
var arr = [ "one", "two", "three", "four", "five" ];

for (i=0; i<5; i++)
{

$("#box_content").fadeOut('slow').fadeIn('slow', function () { $
(this).text(arr[i]); });
}
});

I think what's happening on a lot of attempts is that the loop is
going on through, and not waiting for the function. So, I was hoping
that putting it in the callback would solve that.

I've done a lot of ajax with jquery, but evidently, I need to brush up
on my animation stuff.

Thanks for your help.
-Greg

$(this).fadeOu(duration, function() {


Typo

Sent from my iPhone

On 8 Nov 2009, at 07:27, Michel Belleville
<michel.belleville (AT) gmail (DOT) com> wrote:

> $(this).fadeOu(duration, function() {

Typo indeed ^^°

Though the principle is sound.

Michel Belleville


2009/11/8 Sam Doyle <sammeh.mp3 (AT) gmail (DOT) com>

$(this).fadeOu(duration, function() {


Typo

Sent from my iPhone

On 8 Nov 2009, at 07:27, Michel Belleville <michel.belleville (AT) gmail (DOT) com
wrote:

$(this).fadeOu(duration, function() {

I'm not sure I follow what the principle is?


On Nov 8, 1:16*pm, Michel Belleville <michel.bellevi... (AT) gmail (DOT) com>
wrote:

Typo indeed ^^°

Though the principle is sound.

Michel Belleville

2009/11/8 Sam Doyle <sammeh.... (AT) gmail (DOT) com

$(this).fadeOu(duration, function() {

Typo

Sent from my iPhone

On 8 Nov 2009, at 07:27, Michel Belleville <michel.bellevi... (AT) gmail (DOT) com
wrote:

$(this).fadeOu(duration, function() {

To use callbacks that are triggered actually when the animation finishes
instead of calling the animations all at once and seeing only the very last
because they all start approximately at the same time.

Michel Belleville


2009/11/9 gthorne <gthorne (AT) gmail (DOT) com>

I'm not sure I follow what the principle is?


On Nov 8, 1:16 pm, Michel Belleville <michel.bellevi... (AT) gmail (DOT) com
wrote:
Typo indeed ^^°

Though the principle is sound.

Michel Belleville

2009/11/8 Sam Doyle <sammeh.... (AT) gmail (DOT) com

$(this).fadeOu(duration, function() {

Typo

Sent from my iPhone

On 8 Nov 2009, at 07:27, Michel Belleville
michel.bellevi... (AT) gmail (DOT) com
wrote:

$(this).fadeOu(duration, function() {

Is that close to what I was doing on the second example, where I was
calling $().text in the callback portion of fadeIn()?

On Nov 9, 12:38*am, Michel Belleville <michel.bellevi... (AT) gmail (DOT) com>
wrote:

To use callbacks that are triggered actually when the animation finishes
instead of calling the animations all at once and seeing only the very last
because they all start approximately at the same time.

Michel Belleville

2009/11/9 gthorne <gtho... (AT) gmail (DOT) com

I'm not sure I follow what the principle is?

On Nov 8, 1:16 pm, Michel Belleville <michel.bellevi... (AT) gmail (DOT) com
wrote:
Typo indeed ^^°

Though the principle is sound.

Michel Belleville

2009/11/8 Sam Doyle <sammeh.... (AT) gmail (DOT) com

$(this).fadeOu(duration, function() {

Typo

Sent from my iPhone

On 8 Nov 2009, at 07:27, Michel Belleville
michel.bellevi... (AT) gmail (DOT) com
wrote:

$(this).fadeOu(duration, function() {

Your second example was closer, considering you triggered the text change in
a callback, but you still triggered the animations all at once which I think
wasn't the effect you desired.

So how does the example I've given you work ? Let's comment :

var recursive_anim = function(list, step, target, duration) {
// this is a recursive function that uses :
// - list which is a list of texts to set in the target between each
animation
// - step the position in the list of the text to set in the target before
this cycle of animation starts (0 => first text, 1 => second text, ...)
// - target the element to animate
// - duration the duration of the fadeIn() and the fadeOut()

if (list[step]) { // when we're through the list, we stop
target.text(text).fadeIn(duration, function() { // we change the target's
text and we start the fadeIn()
$(this).fadeOut(duration, function() { // the callback is triggered once the
fadeIn() finishes, and we're using our target (the element that juste faded
in) to start the fadeOut()
recursive_anim(list, step + 1, $(this), duration) // the fadeOut callback is
triggered once the fadeOut() also finishes, and we're trying the next step
of animation (taking the next text and doing everything over with this text)
});
});
}
};

I corrected a small but significant typo on the line
target.text(text).fadeIn(...), obviously I had forgotten the .text() method
in my earlier example.

Hope it helps.

Michel Belleville


2009/11/9 gthorne <gthorne (AT) gmail (DOT) com>

Is that close to what I was doing on the second example, where I was
calling $().text in the callback portion of fadeIn()?

On Nov 9, 12:38 am, Michel Belleville <michel.bellevi... (AT) gmail (DOT) com
wrote:
To use callbacks that are triggered actually when the animation finishes
instead of calling the animations all at once and seeing only the very
last
because they all start approximately at the same time.

Michel Belleville

2009/11/9 gthorne <gtho... (AT) gmail (DOT) com

I'm not sure I follow what the principle is?

On Nov 8, 1:16 pm, Michel Belleville <michel.bellevi... (AT) gmail (DOT) com
wrote:
Typo indeed ^^°

Though the principle is sound.

Michel Belleville

2009/11/8 Sam Doyle <sammeh.... (AT) gmail (DOT) com

$(this).fadeOu(duration, function() {

Typo

Sent from my iPhone

On 8 Nov 2009, at 07:27, Michel Belleville
michel.bellevi... (AT) gmail (DOT) com
wrote:

$(this).fadeOu(duration, function() {