0

我用 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();

}

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

setTimeout(caller, dur += 2000);

};

然后是另一个功能

function caller(){
    atrAnime(2000);
}
4

2 回答 2

1

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

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

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

于 2012-11-03T22:12:16.377 回答
0

将所有动画嵌套在回调中不是更好吗？依靠 setTimeout 感觉不对:)。我的意思是使用相关动画的回调，因此下一阶段的动画只会在前一阶段完成后触发。类似于以下内容：

$("firstElement").slideDown(500, function () { 
    $("secondElement").slideDown(500, function () { 
        $("thirdElement").slideDown(500, function () { 
            //etc
        });         
    });  
});
于 2012-11-03T22:15:38.697 回答