-2

したがって、以下のコードは、テキストを左右から同時にスライドさせるために使用しているものです。残念ながら、最初のアニメーションが完了した後に一時停止することはできません。アニメーションの最初のセットの後に遅延が必要です。

遅延、setTimeout、および setInterval 関数を試しましたが、何も機能していないようです (アイデアについては @evan に感謝します)。どうすればこれを達成できるか知っている人はいますか?

以下のコードが行うことの例を次に示します。

$(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();
    }
});
4

1 に答える 1

0

関数で使用setTimeoutしますqueueNext。

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

デモ: http://jsfiddle.net/dirtyd77/xPXqV/2/

于 2013-04-02T20:51:33.337 に答える