jquery - jQueryのsettimeoutとshow

Question

この新人の質問で申し訳ありませんが、3つの赤い吹き出しを1つずつ表示しようとしています。ここで私のコードを参照してください：http：//jsfiddle.net/FLt9Z/

javascriptのそのセクションは次のようになります。

function leftappear() {
    $('#redbubble-left').show();
}

function topappear() {
    $('#redbubble-top').show();
}

function rightappear() {
    $('#redbubble-right').show();
}


var animation_script = [
    {
         at_time: 30 * 1000, // 30 seconds
         animation: leftappear()
    },
    {
         at_time: 31 * 1000, // 31 seconds
         animation: topappear()
    },
    {
         at_time: 32 * 1000, // 32 seconds
         animation: rightappear()
    }
];

var current_time = 0;

function animate_next() {
    var next = animation_script.shift(),
        time_between = next.at_time - current_time;
    setTimeout(function () {
        current_time = next.at_time;
        next.animation();
        animate_next();
    }, time_between);
}

どうもありがとう！

score 4 · Accepted Answer

2つの問題：

アニメーションメソッドをanimation_scriptで参照するのではなく、呼び出していました
次に最初のアニメーションをトリガーすることはありませんでした。

http://jsfiddle.net/FLt9Z/1/

ここに2つの大きな変更があります。

var animation_script = [
    {
         at_time: 2* 1000, // 30 seconds
         animation: leftappear // NOTE: drop the parens ()
    },
    {
         at_time: 3* 1000, // 31 seconds
         animation: topappear // NOTE: drop the parens ()
    },
    {
         at_time: 4* 1000, // 32 seconds
         animation: rightappear // NOTE: drop the parens ()
    }
];

そして2、それをキックオフし、私は単にanimate_next();底に追加しました。これは、上部または別の場所にあるinitスクリプトに入れることができます。これはデモ目的のためだけでした。

score 2 · Accepted Answer

最初の答えに加えて、表示するバブルのリストを通過したにもかかわらず、現在のコードがそれ自体を呼び出し続けることを指摘したいと思います。代わりに、一度ループしてタイムアウトを設定します。

$.each(animation_script, function(i, animation) {
    var next = animation_script.shift(),
        time_between = next.at_time - current_time;
    setTimeout(function() {
        current_time = next.at_time;
        next.animation();
    }, time_between);
});

jquery - jQueryのsettimeoutとshow

2 に答える 2

Related

Reference