Simple jQuery animation Replace text from array
I want to replace text in "div-span" with text from array. I'd like this simple animation to do two things ...
- Flicker or fade text at random
- Loop continuously
I have a scenario where I am trying in different ways; http://jsfiddle.net/fmdfrank/W47QV/
Anyone?
+3
source to share
1 answer
use jquery.queue and .dequeue to store each operation in the fx queue. this will allow the text change to behave as part of the animation queue. then check if you need a loop.
in fiddle: http://jsfiddle.net/W47QV/4/
$(document).ready(function() {
var items = ["Two", "Three", "Four", "Five", "Six", "One"],
$text = $( '#div1 span' ),
delay = 2; //seconds
function loop ( delay ) {
$.each( items, function ( i, elm ){
$text.delay(delay*1E3).fadeOut();
$text.queue(function(){
$text.html( items[i] );
$text.dequeue();
});
$text.fadeIn();
$text.queue(function(){
if(i == items.length-1){
loop(delay);
}
$text.dequeue();
});
});
}
loop(delay);
});
+5
source to share