logic behind $.each and loops in jquery

Question

Ive been trying to create a testimonial section for a page which will have a slideshow fadeIn(), fadeOut() effect. I have it working with a plugin, but i really want to understand how its working, for customizing in the future.

I see how it works with adding/removing classes somewhat, but is it possible with loops? I'm having so much trouble with how javascript doesnt pause between loop iterations. Take the following code for example:

    <div class="container"></div>

   var jedi = new Array();
  jedi[0]= 'Anakin';
  jedi[1]= 'ObiWan';
  jedi[2]= 'Jacen Solo';

  $.each(jedi,function(counter,value){

    $('.container').append('<p class="blue">' + jedi[counter] + '</p>').children().fadeIn(800*counter);
    $('.container').children().fadeOut(800);
    //alert(value);

     })

Heres the jsfiddle as well: http://jsfiddle.net/jpmMR/

I would like to fade in a characters name, then it fades out, and then the next guy and so on. But what happens is a big mess. If this is possible, can someone please show me how its possible? Also if its not too much trouble, can they explain to me the 'hows' and 'whys' of getting around the fact that JS completes a loop in milliseconds. AND if not even more trouble, explain it in english like im a 9 year old.

Also is it possible to loop an $.each? Thanks so much in advance. This has been killing me.

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

As similar to the accepted answer here, you're going to have to use callbacks. The each() function runs without delay for each of the elements, so you result in them running asynchronously.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 20 '11 at 20:48

John Godspeed

1,387
2
10
16

score 0 · Answer 2 · answered Aug 20 '11 at 20:48

If you want to chain animations, then you have to start the second one on the completion function of the first and so on. As it is you're running all the animations at once. You can see how animation completion functions work in the relevant jQuery documentation.

Alternatively, you can set up an animation queue in jQuery so each one runs after the other.

score 0 · Accepted Answer · answered Aug 20 '11 at 20:59

0

You could also do something like this... though it is not as flexible if you want to do other chained animations.

http://jsfiddle.net/jpmMR/1/

answered Aug 20 '11 at 20:59

sberry

128,281
18
138
165

thanks so much. But im still not totally clear on why yours handles it one at a time and my is running all at once. Is it bc yours is set up where there's only one
in existence at a time? I cant see why mine wasnt performing the task for each array index.
– NickG77 Aug 20 '11 at 21:26

logic behind $.each and loops in jquery

3 Answers3