Question

我用jquery创建了一部电影;它由代表电影每个场景的多个函数组成。有些场景的运行时间比其他场景要长。我在制作整部电影的循环时遇到了麻烦。我尝试过几种方式设置setInterval，但它们似乎都失败了。为了使事情变得复杂（至少对我来说），这是幻灯片放映内部，理想情况下会在完成后触发“下一个”按钮。

随意敲打我用过的策略，因为每个场景的setTimeout是我能够弄清楚如何让每个函数在下一个运行足够长时间之后运行的唯一方法。我无法弄清楚如何使用场景应该运行的时间来调用每个函数与我在前一个函数完成后调用下一个函数的当前策略。

感谢方向

我想我需要javascript来计算总时间并在setTimeout中使用值调用atrAnime（），但我似乎无法让它计算并传回。

这就是我所拥有的：

$(document).ready(function(){

    atrAnime(2000);

});
function atrAnime(dur){
    first();
    setTimeout(second, dur);
    setTimeout(third, dur += 2000);
    setTimeout(forth, dur += 2000);
    setTimeout(fifth, dur += 2000);
    setTimeout(sixth, dur += 6000);
    setTimeout(seventh, dur += 2000);
    setTimeout(eighth, dur += 2000);
    setTimeout(ninth, dur += 2000);
    setTimeout(tenth, dur += 2000);
    setTimeout(end, dur += 3000);

};

一些场景示例：

function first(dur){

    $('.pcba')
        .css({
            left: '150px'
            })
        .show();
    $('.pcb_cad')
        .css({
            left: '275px',
            top: '50px'
            })
        .show();
}
function second(dur){
        $('.pcba').fadeOut();
        $('.arrows')
        .css({
            left: '275px',
            top: '50px'
            })
        .fadeIn();
        $('.heatGenComps')
            .css({
                left: '325px',
                top: '20px'
                })
        .fadeIn();

}

修改我的新ghetto解决方案在atrAnime（）调用中具有最后一个函数：

setTimeout(caller, dur += 2000);

};

然后是另一个功能

function caller(){
    atrAnime(2000);
}

Answer 1

您正在使用动画中的某些功能，这些功能在动作完成后实际提供回调方法。例如，fadeIn / fadeOut函数在元素完全显示/隐藏时具有“onComplete”回调 -

$("#elem").fadeOut(function(){
  alert('element has faded out!');
});

你可以利用这些回调函数，让它们都调用一个管理执行顺序的中心函数。每个回调都会触发下一个序列。 show()和fadeIn()函数都提供了此回调，详见文档。

Answer 2

将所有动画嵌套在回调中会不会更好？只是依靠setTimeout :)感觉不对。我的意思是使用相关动画的回调，因此下一个动画阶段只会在前一个动画结束后触发。有点像：

$("firstElement").slideDown(500, function () { 
    $("secondElement").slideDown(500, function () { 
        $("thirdElement").slideDown(500, function () { 
            //etc
        });         
    });  
});

jquery多功能定时和重复

2 个答案: