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

在queueNext功能中使用setTimeout。

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

样本： http://jsfiddle.net/dirtyd77/xPXqV/2/

文本动画暂停并继续

1 个答案: