1

我用 8*8 的 div 元素制作了一个动画游戏，目前我正在使用 JQuery 中的动画功能。

当我调用动画开始的函数时，我使用以下代码检查动画是否全部停止：

function start_animation()
{
  //the animations start here
  $("div").promise().done(function() {
     //here comes the code for when the animations stoped
  }
}

现在我想用 css 转换做动画，但我找不到检查所有动画是否都完成的解决方案。

我试过了：

$("div").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

但这会在每次完成 1 个动画时给出一个回调。

还有另一种方法可以做到这一点吗？

4

1 回答 1

1

查看该promise函数的作用https://github.com/jquery/jquery/blob/master/src/queue.js#L119。您将需要使用类似的代码，只是您不会挂钩resolve动画队列，而是将其绑定为事件处理程序。

简而言之：

function start_animation() {
  var divs = $("div");
  // the animations start here

  var count = divs.length;
  // using `.one` automatically unbinds the handler
  divs.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    if ( --count == 0) {
      // here comes the code for when all the animations stoped
    }
  }
}
于 2013-02-08T14:07:16.063 回答