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

【问题标题】：Simple jQuery Animation Replace Text from Array简单的 jQuery 动画从数组中替换文本
【发布时间】：2012-04-04 15:08:49
【问题描述】：

我想用数组中的文本替换“div span”中的文本。我希望这个简单的动画能做两件事......

随机飞入或淡入文本
不断循环

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

有人吗？

【问题讨论】：

标签： jquery animation text

【解决方案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);

});

【讨论】：

效果很好。谢谢！我应该能够添加随机动画，但现在我看到它工作了，我实际上喜欢简单的淡入淡出。很干净。