Question

我有HTML代码：

<h1 class="tlt" data-in-effect="rollIn">My Title</h1>

和JS：

var messages = [ "one", "two", "three", "four", "five"];
var position = 0;

function nextMove() {
    $('.tlt').text(messages[position]);
    position += 1;
    animate();
}

function animate() {
    $('.tlt').textillate({
        autostart: false,
        loop: false,
        in: {
            effect: 'fadeInRightBig',
            sync: true,
            delayScale: 1,
            callback: nextMove
        },
    });
}

$(function() {
    animate();
})

如果我重新加载页面，我可以看到一个动画，更改文本......这就是全部。为什么我没有下一个动画周期？

更新

这是一个JSFiddle示例enter link description here

更新2

此示例正常工作，直到我取消注释行（// $（'。tlt'）。text（messages [position]）;）。看起来我无法改变这个div ...

var messages = [ "one", "two", "three", "four", "five"];
var position = 0;

function animate() {
    $('.tlt').textillate({
        autostart: false,
        loop: true,
        in: {
            effect: 'fadeInRightBig',
            sync: true,
            delayScale: 1,
            callback: function () {
                if(position > 5) 
                    position = 0;

                alert(position);
                // $('.tlt').text(messages[position]);

                position += 1;
            }
        },
    });
}

$(function() {
    animate();
})

Answer 1

尤里卡，我期待的不仅仅是+1和正确答案先生。：）

var messages = [ "one", "two", "three", "four", "five"];
var position = 0;

function nextMove() {
var tlt = $("<h1 class='tlt'>My Title</h1>");
$('div').empty();
$('div').append(tlt);
if(position < 5){
$('.tlt').text(messages[position]);
position += 1;
    animate();}
}

function animate() {
$('.tlt').textillate({
    autostart: true,
    loop: false,
    in: {
        effect: 'fadeInRightBig',
        sync: true,
        delayScale: 1,
        callback: nextMove
    },
});
}

$(function() {
animate();
})

http://jsfiddle.net/ut8P3/

Answer 2

我只想把它留给那些将要完成同样任务的人。这是我的最终解决方案http://jsfiddle.net/5GWLQ/1/

$(function() {
    var messages = [ "one", "two", "three", "four", "five"];
    var position = 0;
    var tlt_html = $("<h1 class='tlt'>My Title</h1>");

    var mainloop = function() {
        $('div').empty();   
        $('div').append(tlt_html);

        if(position >= 5) 
            position = 0;

        $('.tlt').text(messages[position]);

        var $tlt = $('.tlt').textillate({
            autostart: true,
            loop: false,
            in: {
                effect: 'fadeInRightBig',
                sync: true,
                delayScale: 2
            }
        });

        position += 1;  
        $tlt.textillate('in');
    };

    setInterval(mainloop, 1000)
})

Textillate中的递归动画

2 个答案: