jquery多功能定时和重复

Question

我使用jquery创建了一部电影；它由多个函数组成，表示电影的每个场景。有些场景比其他场景要长一些。我很难创造出一套完整的电影。我尝试过几种设置setInterval的方法，但它们似乎都失败了。更复杂的事情(至少对我来说)，这是在幻灯片中，理想情况下触发“下一步”按钮，当它完成。

请放心，我在每个场景中都使用了作为setTimeout的策略，这是在下一个函数运行足够长时间之后，如何让每个函数运行的唯一方法。我不知道如何用场景应该运行的时间来调用每个函数，而我现在的策略是在上一个函数完成后调用下一个函数。

谢谢你的指导

我想我需要javascript来计算总时间，并用这个值在setTimeout中调用setTimeout()，但是我似乎无法让它计算和传递回来。

我现在拥有的是：

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

}

编辑我的新贫民窟解决方案在atrAnime()调用中有最后一个函数如下：

setTimeout(caller, dur += 2000);

};

然后是另一个函数

function caller(){
    atrAnime(2000);
}

Answer 1

您正在使用动画中的一些函数，一旦它们的操作完成，这些函数实际上提供了回调方法。例如，当元素完全显示/隐藏时，fadeIn/fadeOut函数有一个"onComplete“回调-

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

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

• show()
• fadeIn()

Answer 2

在回调中嵌套所有动画不是更好吗？只是觉得依赖setTimeout是不对的:)。我的意思是使用相关动画的回调，所以下一阶段的动画只有在前一个动画完成后才会启动。与…有关的东西：

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