如何在jQuery .each()的每次迭代之间添加暂停?

5uzkadbs  于 2022-12-27  发布在  jQuery
关注(0)|答案(8)|浏览(132)

我获取一个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名称更新之前完成暂停?

d8tt03nd

d8tt03nd1#

我把这作为一个评论,但现在我已经正确地阅读了它,并回答了我自己的问题,这可能会工作:

function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time);
      time += 500;
  });
}
mlmc2os5

mlmc2os52#

很抱歉挖掘了一个旧的线程,但这个技巧可能对类似的问题有用:

$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});
ctehm74n

ctehm74n3#

如果你做一个每500毫秒调用一次自己的方法,那就应该做到这一点。下面的代码应该可以工作。

var __OBJECTS = [];

$('#gameboard .card').each(function() {
    __OBJECTS.push($(this));
});

addPositioningClasses();

function addPositioningClasses() {
    var $card = __OBJECTS.pop();
    $card.addClass('position');
    if (__OBJECTS.length) {
        setTimeout(addPositioningClasses, 500)
    }
}

在小提琴上测试:http://jsfiddle.net/jomanlk/haGfU/

wxclj1h5

wxclj1h54#

.delay()怎么样?

function addPositioningClasses($card){
  setTimeout(function() { $card.addClass('position')}, 1000);
}
cxfofazt

cxfofazt5#

如果您只针对Safari/iOS,根据控制动画序列的确切时间对您的重要性,您可能应该避免任何涉及JS超时的解决方案。不能保证动画会在超时延迟的同时完成,特别是在慢速处理器或后台有很多东西的机器上。webkit的后续版本(包括移动的safari)确实允许通过@-webkit-keyframes实现定时动画序列。Webkit.org有一个nice intro to it。它实际上很容易实现。

gcmastyq

gcmastyq6#

给予这个试试:

function positionCards() {
  $('#gameboard .card').each(function() {
      $(this).delay(500).addClass('position');
  });
}

老实说...我已经让$(this).delay()在过去的某些情况下行为不端,在其他情况下工作不正常。但是,这通常与jQuery动画调用结合使用,而不是DOM属性操作。
请注意,delay()的功能与setString不同。有关详细信息,请参阅the jQuery .delay() documentation
据我所知,$().each确实是按程序执行的,所以调用的下一次迭代应该只在前一次迭代完成后开始。

6l7fqoea

6l7fqoea7#

看看这个,对我来说效果很好!:)

jQuery('.optiresultsul li').each(function(index) {
    jQuery(this).delay(500*index).animate({ opacity: 1 }, 500,function(){
        jQuery(this).addClass('bgchecked');
    });
});
igsr9ssn

igsr9ssn8#

此代码将添加并设置初始延迟为50 ms。然后,对于通过“.row”类的每个循环,它将增加额外的200 ms延迟。这将为每一行创建一个很好的延迟显示效果。

$( document ).ready(function() {
    // set inital delay
    var dtotal = 50;
    $(".row").each(function() {
    //add delay to function
      $(this).delay(dtotal).show();
    //add 200ms to delay for each loop
      dtotal = dtotal + 200;
    });
});

相关问题