Javascript：在css动画之后继续执行

我有一个应用程序“自动滑动拼图”，上面有人工智能等等。我将用它制作一些很酷的组合图库

我有一种方法可以使立方体动画化：

this.animateSelection = function(direction,time)
{   
    if (time===undefined) this.time=150;    
    this.moveDistance=this.cubeSize+this.spacing;
    switch (direction)
    {   
        //move right
        case 'r': $('#' + selectionName).transition({ x: '+=' +this.moveDistance +'px' },this.time);
        break;

        //move down         
        case 'd': $('#' + selectionName).transition({ y: '+=' +this.moveDistance +'px' },this.time);            
        break;

        //move left         
        case 'l': $('#' + selectionName).transition({ x: '-=' +this.moveDistance +'px' },this.time);    
        break;

        //move up           
        case 'u': $('#' + selectionName).transition({ y: '-=' +this.moveDistance +'px' },this.time);        
        break;

        //if wrong direction is given
        default:  return false;
    }
    return true;        
}

当我称之为单身时，一切都很酷

但问题是：

当我这样做的时候

myClass.animateSelection('d');
alert('bla bla bla');

动画完成前会显示警报

我的主AI循环在50毫秒内执行，并管理大约200个移动，所以调用该方法。我希望该方法保持循环的执行，直到动画完成

---

我做不到。动画方法在许多不同的情况下使用，并被各种其他方法使用。如果使用myClass.animateSelection，脚本的执行不会在点击

$（）时停止。transition

。相反，transition将设置一个包含一些简单转换效果的队列，这些效果将在事件循环中调用

这称为异步行为，其优点是脚本不会停止。但是，大多数异步函数将回调作为可选参数，在函数所需效果结束或失败后调用回调

在您的情况下，

transition

支持回调作为附加参数：

$.fn.transition(options, [duration], [easing], [callback]);

您必须更改

animateseselection

以获取回调参数：

this.animateSelection = function(direction,time,callback)
{   
    if (time===undefined) this.time=150;
    this.moveDistance=this.cubeSize+this.spacing;
    switch (direction)
    {   
        //move right
        case 'r': $('#' + selectionName).transition({ x: '+=' +this.moveDistance +'px' },this.time,callback);
        break;

        //move right            
        case 'd': $('#' + selectionName).transition({ y: '+=' +this.moveDistance +'px' },this.time,callback);
        break;

        //move right            
        case 'l': $('#' + selectionName).transition({ x: '-=' +this.moveDistance +'px' },this.time,callback);    
        break;

        //move right            
        case 'u': $('#' + selectionName).transition({ y: '-=' +this.moveDistance +'px' },this.time,callback);        
        break;

        //if wrong direction is given
        default:  return false;
    }
    return true;        
}

和使用

myClass.animateSelection('d',undefined,function(){alert('bla bla bla');});

---

相反。

是的，但该方法由“findEscapePath”方法调用一次，由“findNeighbourFreeField”调用一次，由“moveBack”方法调用一次，以及其他许多方法调用。没有办法改变动画选择本身，也没有办法在每个被调用的地方改变它。因为这会非常复杂。如果您添加一个回调参数，其他调用仍然可以工作，因为它可能是可选的，那么您可以在需要调用函数的位置添加回调引用。@user1576183:What box said。大多数jQuery动画不会停止代码的执行，因此这基本上是跟踪函数状态的唯一方法。