jquery - 文字动画暂停并继续

Question

所以下面的代码是我用来让文本同时从左右滑入的代码。不幸的是，我无法在第一个动画完成后暂停它。在第一组动画之后我需要延迟。

我尝试了延迟、setTimeout 和 setInterval 函数，但似乎没有任何效果（感谢@evan 的想法）。有谁知道我怎么能做到这一点？

这是以下代码的示例：jsfiddle example

$(function() {

    var num = 0;
    var wordTrue = true;
    var words = [
        {left: "SLAM", right: "FACE"},
        {left: "BOOST", right: "JAMZ"}
     ];   

    var fadel = $('#fadel');
    var fader = $('#fader');

    animate();

    function animate() {
        var leftword = words[num].left;
        var rightword = words[num].right;

        var first = leftword.slice(0, leftword.indexOf(" "));

        first = "<span class=\"g h\">" + first + "</span>";

        var lastWords = leftword.substring(leftword.indexOf(" ") + 1);

        var finalString = first + lastWords;

    fadel
        .stop()
        .css('top', '18px')
        .css('left', '0')
        .css('opacity', 0)
        .text(leftword).show();

    fader
        .stop()
        .css('top', '68px')
        .css('left', '400px')
        .css('opacity', 0)
        .text(rightword).show();

    fadel.animate({
        opacity: 1,
        left: '150px'
        }, 2700, function() {
            fadel.fadeOut("fast", function() {
            queueNext().delay(5000);
        });
    });

    fader.animate({
        opacity: 1,
        left: '250px'
    }, 2700, function() {  
            fader.fadeOut("fast");
        });
    }

    function queueNext() {
        if (++num == words.length)
        num = 0;

        animate();
    }
});

Answer 1

setTimeout在你的queueNext函数中使用。

function queueNext()
{
    if (++num == words.length)
        num = 0;
    setTimeout(animate, 3000); //delay duration (in milliseconds)
}

演示：http: //jsfiddle.net/dirtyd77/xPXqV/2/