Question

我正在为新版本的主页上的幻灯片创建一个循环动画链，出于某种原因，我的时间已经结束，并且所有幻灯片都不会在最后淡出。

HTML

<canvas class="home-masked" width="186" height="183"></canvas>
<canvas class="home-masked2" width="186" height="183"></canvas>
<canvas class="home-masked3" width="186" height="183"></canvas>

$(window).load(function() {
    function loop() {
        $('.home-masked').animate({
            opacity: 1
        }, 500 );

        $('.home-masked2').delay(2500).animate({
            opacity: 1
        }, 500 );

        $('.home-masked3').delay(5000).animate({
            opacity: 1
        }, 500 );

        $('.home-masked3, .home-masked2, .home-masked').delay(5500).animate({
            opacity: 0
        });
    }
    setInterval(loop, 5500);
    loop();
});

我在这里有一个实时预览，等到最后的幻灯片，他们都应该淡出并重新启动。

http://isca01.bigwavemedia.info/~newlife/

任何想法？

Answer 1

你不应该将setInterval或setTimeout与动画混合在一起 - 并不能保证这两个计时器会以相同的时间刻度运行。

您可以删除setInterval来电，然后使用＆＃34;承诺＆＃34;附加到元素以检测动画何时完成并通过将以下内容作为loop()函数的最后一行重新启动它们。

$('.home-masked3, .home-masked2, .home-masked').promise().done(loop);

使用此公式，您可以使用立即调用的函数表达式来启动它，而不是显式调用loop：

(function loop() {

    // do animations here
    ...

    $(...).promise().done(loop);  // reinvoke myself
})();                             // start myself off

循环间隔时间不足

1 个答案: