Question

I’m trying to add a class with top and left properties for animation, but the div just shifts to the added class attribute without animating.

#myClass.move {
    top:100px;
    left:100px; 
}     

The goal is to have the animation happen right when the class is added and animate based on the properties of the added class.

var shiftTop = parseInt($(".move").css("top")); 
var shiftLeft = parseInt($(".move").css("left")); 

$("#myClass").addClass("move").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000, function() {});

Is this possible?

Answer 1

Use jQueryUI.

Demo here

$("#myClass").click(function() {
    $(this).addClass("move", 1000);
});​