我获取一个jQuery对象数组,然后通过.each()修改数组中的每个jQuery。
在本例中,我更新了类名以触发一个-webkit-transition-property来利用css转换。
我想有一个停顿之前,每个css的过渡开始。我正在使用以下内容,但每次更新之间没有延迟。相反,它们似乎都在同时更新。
function positionCards() {
$cards = $('#gameboard .card');
$cards.each(function() {
setTimeout( function(){ addPositioningClass($(this)); }, 500 )
});
}
function addPositioningClasses($card){
$card
.addClass('position')
}
我本希望setbacks能解决这个问题,但它似乎不起作用。有没有一种方法可以在每个对象的每个CLASS名称更新之前完成暂停?
8条答案
按热度按时间d8tt03nd1#
我把这作为一个评论,但现在我已经正确地阅读了它,并回答了我自己的问题,这可能会工作:
mlmc2os52#
很抱歉挖掘了一个旧的线程,但这个技巧可能对类似的问题有用:
ctehm74n3#
如果你做一个每500毫秒调用一次自己的方法,那就应该做到这一点。下面的代码应该可以工作。
在小提琴上测试:http://jsfiddle.net/jomanlk/haGfU/
wxclj1h54#
.delay()怎么样?
或
cxfofazt5#
如果您只针对Safari/iOS,根据控制动画序列的确切时间对您的重要性,您可能应该避免任何涉及JS超时的解决方案。不能保证动画会在超时延迟的同时完成,特别是在慢速处理器或后台有很多东西的机器上。webkit的后续版本(包括移动的safari)确实允许通过
@-webkit-keyframes
实现定时动画序列。Webkit.org有一个nice intro to it。它实际上很容易实现。gcmastyq6#
给予这个试试:
老实说...我已经让$(this).delay()在过去的某些情况下行为不端,在其他情况下工作不正常。但是,这通常与jQuery动画调用结合使用,而不是DOM属性操作。
请注意,delay()的功能与setString不同。有关详细信息,请参阅the jQuery .delay() documentation。
据我所知,$().each确实是按程序执行的,所以调用的下一次迭代应该只在前一次迭代完成后开始。
6l7fqoea7#
看看这个,对我来说效果很好!:)
igsr9ssn8#
此代码将添加并设置初始延迟为50 ms。然后,对于通过“.row”类的每个循环,它将增加额外的200 ms延迟。这将为每一行创建一个很好的延迟显示效果。