animation interrupting

http://stackoverflow.com/q/12238016/922168

by nickaknudson

HTML

<button id="add">add</button>
<button id="remove">remove</button>
<div id="obj"></div>

CSS

.obj {
    margin:0px;
    width:40px;
    height:40px;
    position:absolute;
    left:0px;
    top:60px;
    background:green;
}

.adder {
    width:200px;
    height:80px;
}

JavaScript

var obj = $("#obj");
obj.addClass("obj");

var add_width = 200;
var add_height = 80;
var obj_width = 40;
var obj_height = 40;

$("#add").click(function(){
    //obj.addClass("adder", 2000, "easeInOutCubic", onAdded);
    obj.stop().animate({width: "+=" + (add_width - obj.width()) + "px", height: "+=" + (add_height - obj.height()) + "px"}, 2000, "easeInOutCubic");
});

$("#remove").click(function(){
    //obj.removeClass("adder", 2000, "easeInOutCubic", onRemoved);
    obj.stop().animate({width: "-=" + (obj.width() - obj_width) + "px", height: "-=" + (obj.height() - obj_height) + "px"}, 2000, "easeInOutCubic");
});

function onAdded () { console.log("added"); }

function onRemoved () { console.log("removed"); }