jquery多功能计时和重复

我创建了一些使用jQuery的电影;它由代表电影中每个场景的多个功能组成。有些场景必须比其他场景跑得长。我无法创建整个电影的循环。我试过设置setInterval几种方式，但他们似乎都失败了。让事情变得复杂（至少对我来说），这是幻灯片放映中的内容，理想情况下它会在完成时触发“下一个”按钮。jquery多功能计时和重复

随时敲我使用的每个场景的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); 
}

来源

2012-11-03 twinturbotom

您正在使用你的动画，一旦他们的动作完成后，实际上提供的回调方法的一些功能。例如，fadeIn/fadeOut功能有当元素已经完全显示出一个“的onComplete”回调/隐藏 -

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

你可以可以利用这些回调函数，让他们管理的所有呼叫中的一个核心功能执行顺序。每个回调将触发下一个序列。 show()和fadeIn()函数都提供此回调，详见文档。

来源

2012-11-03 22:12:16 Lix

好点...如果他们都有回调（他们应该），除了重构代码（我不反对），我不知道我怎么可以定义每个场景运行的时间量......除非回调被设置了超时这与我有什么关系？我很欣赏答案，但更大的一块是循环...我编辑我的原始与我使用的新贫民窟解决方案。 – twinturbotom

岂不更好筑巢所有动画的回调？它只是不觉得正确依靠setTimeout :)。我的意思是使用相关动画的回调，因此下一个动画只有在前一个动画完成后才会触发。一些沿线的：

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

来源

2012-11-03 22:15:38 Zappa

setTimeout不可靠/避开你真正的开发人员？我能够定义场景之间的时间量非常重要......您的示例很有意义，但每个场景都有多个功能在同一时间或之后发生（取决于场景），所以我必须弄清楚如何将场景包裹在一个函数中，为整个函数添加延迟（控制场景之间的时间），然后回调下一个场景。 – twinturbotom

setTimeout肯定有它的位置，但我不相信它的动画等，因为它不知道previuous任务是否已完成或没有。它纯粹是基于时间的。另一个选择是为每个单独场景创建一个函数，然后使用上面提到的结构构建您的实际“电影”。这样，您可以根据需要多次调用相同的场景，并可能将一个持续时间参数传递给该函数，因此动画回调会根据需要将下一个场景触发多少秒。 – Zappa

jquery多功能计时和重复

回答

相关问题