Javascript: Continue exection after css animation

Question

I've got aplication 'self-sliding-puzzle' with AI on it etc. I will use it to make some cool portfolio gallery.

I've got one method that just animates cube:

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;        
}

Everything works cool when I call it single time.

But problem is:

when i do

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

alert is show before animation is done

My main AI loop executes in 50ms and manage about 200 moves, so calls method. I want that method to hold executing of loop till ANIMATION is done.

Callback dont make it. animation Method is used in many different situation and by various other methods. Its impossible to make it fit that way IMO.

Zeta · Accepted Answer · 2012-08-04 14:42:51Z

1

If you use myClass.animateSelection the execution of the script won't stop when it hit $().transition. Instead transition will set up a queue of some simple transition effects which will be called in the event loop.

This is called asynchronous behavior and has the advantage that your script doesn't stop. However, most asynchronous functions will take a callback as optional parameter, which will be called after the functions desired effect has either ended or failed.

In your case, transition supports a callback as additional parameter:

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

You would have to change your animateSelection to take a callback argument:

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;        
}

and use

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

instead.

answered Aug 4, 2012 at 14:42

Zeta

106k13 gold badges205 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1576183 Over a year ago

Yes, but method is called once by 'findEscapePath' method, once by 'findNeighbourFreeField' once by 'moveBack' method, and many many more. Is there no way to change animateSelection ITSELF and dont change it on every place that it's called. Becouse it would be freaking complicated.

box86rowh Over a year ago

If you add a callback parameter, your other calls will still work as it could be optional, then you could add the callback reference where you need the function to be called after.

Zeta Over a year ago

@user1576183: What box said. Most jQuery animations wont stop the execution of your code, so this is basically the only way to keep track of your functions' status.

Collectives™ on Stack Overflow

Javascript: Continue exection after css animation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related