简单的jQuery动画替换数组中的文本

Question

我想用数组中的文本替换'div span'中的文本.我想要这个简单的动画来做两件事......

1. 随机飞行或淡化文本
2. 不断循环

我有一个小提琴设置,我一直在尝试不同的东西; http://jsfiddle.net/fmdfrank/W47QV/

任何人？

Answer 1

使用jquery .queue和.dequeue将每个操作存储在fx队列中.这将使文本更改作为动画队列的一部分.然后检查是否需要循环.

在小提琴: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);

});?