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







All Articles