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.
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/