Question

我正在抓取一个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')
}

我希望setTimeout可以解决这个问题，但它似乎没有起作用。有没有办法在每个对象的每个CLASS名称更新之前完成暂停？

Answer 1

我将此添加为评论，但现在我已正确阅读并回答了我自己的问题，这可能会有效：

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

  var time = 500;

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

Answer 2

很抱歉挖掘旧帖子，但这个提示可能对类似问题有用：

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

Answer 3

如果你制作一个每隔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/

Answer 4

.delay()怎么样？

或

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

Answer 5

如果你只针对Safari / iOS，根据控制动画序列的确切时间对你的重要程度，你应该避免任何涉及JS超时的解决方案。无法保证动画将在超时延迟的同时完成，特别是在慢速处理器或后台有大量内容的机器上。更高版本的webkit（包括移动safari）允许通过@-webkit-keyframes定时动画序列。 Webkit.org有一个nice intro to it。它实际上很容易实现。

Answer 6

尝试一下：

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

我会说实话......在过去的某些情况下，我曾经有过$（this）.delay（）行为异常，并且在其他情况下完美无缺地工作。但是，这通常与jQuery动画调用结合使用，而不是DOM属性操作。

请注意.delay（）的功能与setTimeout不同。有关详细信息，请参阅the jQuery .delay() documentation。

据我所知，$（）。每个都在程序上执行，因此调用的下一次迭代应该只在前一次完成之后开始。

Answer 7

检查出来，对我来说效果很好！：）

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

Answer 8

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

int x;
Random R;
coord C;
C = R.rnd_coord(10, 10);
std::cout << C.first << ", " << C.second << std::endl;
std::cin >> x;

return 0;

如何在jQuery .each（）的每次迭代之间添加暂停？

8 个答案: