jquery animate step has incorrect start value

Question

I'm having trouble performing a simple rotation animation using jquery's animate method. I am trying to start a square at 45 degrees rotation and then, when clicking a button, rotate the square another 45 degrees (to complete at 90).

However, when I attempt the animation, the square first jerks back to a rotation of 0 before starting to progress towards its final completion point (90 degrees).

This appears to be because the "now" argument of animate()'s "step" option is starting at 0, rather than the actual starting point of the element, 45 degrees.

Any thoughts on what I'm doing wrong here?

http://jsfiddle.net/agentfitz/btz89/2/

// css
.square {
  transform: rotate(45deg); // starting point
}

// js
$(".square").animate(
    {
        rotation: 90,   
    },    
    {
        step: function(now, tween) {

            var $el = $(this);

            if (tween.prop === "rotation") {

                console.log(now); 
                $el.css('transform','rotate('+now+'deg)');  

            }

        },

        duration: 2000
    }

);

Answer 1

Please follow this example: http://jqversion.com/#!/1GLob7P

Javascript code:

$("a").click(function(e){
    e.preventDefault();

    var initRotation = 0;

    $(".square").animate(
        {
            rotation: 45, // how many degrees do you want to rotate
        },    
        {
            start: function(promise){
              initRotation = getRotationDegrees($(this));
            },
            step: function(now, tween) {

                var $el = $(this);
                if (tween.prop === "rotation") {

                    var newRotation = initRotation + now;

                    $el.css('-webkit-transform','rotate('+newRotation+'deg)');
                    $el.css('-moz-transform','rotate('+newRotation+'deg)'); 
                    $el.css('transform','rotate('+newRotation+'deg)');  
                }

            },
            duration: 2000
        }
    );
});

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle +=360 : angle;
}

Answer 2

You can use start option to customize property start value:

// css
.square {
  transform: rotate(45deg); // starting point
}

// js

var startRotation = 45;

$(".square").animate(
    {
        rotation: 90,   
    },    
    {
        start: function(promise) {
            for (var i = 0; i < promise.tweens.length; i++) {
                var tween = promise.tweens[i];
                if (tween.prop === "rotation") {
                    tween.start = startRotation;
                }
            }
        },
        step: function(now, tween) {
            var $el = $(this);
            if (tween.prop === "rotation") {
                console.log(now); 
                $el.css('transform','rotate('+now+'deg)');  
            }
        },
        duration: 2000
    }
);