cancel animation callback

by FiNGAHOLiC

HTML

<button id="buttonA">animate left</button>
<button id="buttonB">animate right</button>
<div id="box"></div>

CSS

#box{
    width: 100px;
    height: 100px;
    background: #000;
    position: absolute;
    top:30px;
    left: 0;
    z-index:1;
}

JavaScript

$(function(){
    
    var $buttonA = $('#buttonA');
    var $buttonB = $('#buttonB');
    
    var $box = $('#box');
    
    $buttonA.on('click', function(){
        $box.stop().animate({
            left: 0
        }, 3000).promise().done(function(){
            console.log('left done');
        });
    });
    
    $buttonB.on('click', function(){
        $box.stop().animate({
            left: 400
        }, 3000).promise().done(function(){
            console.log('right done');
        });
    });
    
});