Question

我正在用jQuery编写一个游戏而且我有点陷入困境。我想在绘制阶段同步触发一系列webkit动画，中间有1秒的延迟。我附上相关代码（不能正常工作）。：

jQuery的：

var colour_sequence = [];
var drawGame = function() {
  for (var index = 0; index < colour_sequence.length; index++) {
    $(queue_selector).queue("syncFnQueue", runMe(toggle_tile, colour_sequence[index], queue_selector));
  }
  var current_tile = chooseRandomTileId();
  $(queue_selector).queue("syncFnQueue", runMe(toggle_tile, current_tile, queue_selector));
  $(queue_selector).dequeue("syncFnQueue");

  colour_sequence.push(current_tile);
}


var toggle_tile = function(element) {
  $(element).toggleClass(animated_img_class);
  $(element).toggleClass(simple_img_class);
};

var runMe = function(fn, e, selec) {
  return function() {
    fn(e);
    setTimeout(function() {
      $(selec).dequeue("syncFnQueue");
    }, 1000);
  };
};

CSS：

.game-img {
  opacity: 1;
}
.game-img-animated {
  -webkit-animation: grow-shrink 1s ease-in-out;
  animation: grow-shrink 1s ease-in-out;
}

HTML：

<img id="red-brain" class="img-responsive game-img" src="images/brain_red.png" alt="" />
<img id="yellow-brain" class="img-responsive game-img" src="images/brain_yellow.png" alt="" />
<img id="green-brain" class="img-responsive game-img" src="images/brain_green.png" alt="" />
<img id="blue-brain" class="img-responsive game-img" src="images/brain_blue.png" alt="" />

编辑：对于上一个问题的模棱两可，我们深表歉意。问题是上面的代码似乎相当随机地触发了动画。有时它们有时会正确触发。

编辑2：已解决。将在几天内用解决方案更新。

Answer 1

您可以在CSS中使用animation-delay选项以及可以从data-attribute中获取和获取的相对编号。

<img id="red-brain" class="img-responsive game-img" data-delay=".3s" src="images/brain_red.png" alt="" />

$(this).css({"animation-delay" : $(this).attr(data-delay)})

Answer 2

看起来问题的一部分是你实际上是在调用runMe函数而不是将它排队等待运行：

这将立即调用runMe

$(queue_selector).queue("syncFnQueue", 
  runMe(toggle_tile, colour_sequence[index], queue_selector));

这将对稍后调用runMe的函数进行排队：

$(queue_selector).queue("syncFnQueue",
 function(){ runMe(toggle_tile, colour_sequence[index], queue_selector)});

jQuery同步动画触发器

2 个答案: