code running before fadeIn() & fadeOut() complete
Simple newbie question as I start learning jQuery. I am experimenting with a simple "marquee" that fades in and fades out each element of a string array. To make it perpetually looping I follow the array traversal with a setInterval( ) to repeat the marquee function.
1) the loop executes only once even though setInterval( ) is called (verified in Firebug debugger)
2) the "third string" is displayed all three times through the loop
3) other code inside or outside the loop (as in the 'alert( )' example below) executes before the first fadeIn() and fadeOut().
I am obviously missing something and I will be grateful for any guidance.
Here's the code:
$(document).ready(function() {
var txtArray = ['first string',
'second string',
'third string'];
marquee();
function marquee(){
var idx = 0;
do {
$('#textCanvas p').text(txtArray[idx]).fadeIn(2000).fadeOut(2000);
idx++;
} while (idx < txtArray.length);
//.....alert("Got to alert"); ....this displays before any of the array text!
setInterval('marquee', 2000);
}//end: marquee
}); // end ready
1) the loop executes only once even though setInterval( ) is called (verified in Firebug debugger)
2) the "third string" is displayed all three times through the loop
3) other code inside or outside the loop (as in the 'alert( )' example below) executes before the first fadeIn() and fadeOut().
I am obviously missing something and I will be grateful for any guidance.
Here's the code:
$(document).ready(function() {
var txtArray = ['first string',
'second string',
'third string'];
marquee();
function marquee(){
var idx = 0;
do {
$('#textCanvas p').text(txtArray[idx]).fadeIn(2000).fadeOut(2000);
idx++;
} while (idx < txtArray.length);
//.....alert("Got to alert"); ....this displays before any of the array text!
setInterval('marquee', 2000);
}//end: marquee
}); // end ready