jQuery animate of custom value (not a CSS property)

Question

I'd like to do the strangest thing: make a value change with animate which isn't a css property but just a variable.

I need this because I want to rotated an element when an user clicks on its border. So I need to animate the angle value and then use it in a custom drawing algorithm.

I tried to use css property of an hidden DIV just to store it's angle value and animate it, but it doesn't work properly.

Can anyone helps me with it please?

Answer 1

Just stumbled upon this while searching for the same thing and the correct answer appears to be

$({foo:0}).animate({foo:100}, {
    step: function(val) {
        // val takes values from 0 to 100 here
    }
})

Found on http://james.padolsey.com/javascript/fun-with-jquerys-animate/

Answer 2

Annoyingly it's not possible to run the animate function without actually supplying some CSS properties for it to work on (it doesn't give you the values in between).

You don't need to even have the animation working on the actual element (or variable) you want to change so it's possible to hack it to work using the step argument as described by @Andrew like so:

$('<div/>').css({ height: _your_start_value }).animate({
    height: _your_end_value
}, { 
    step: function (currentValue) {
        //do what you need to with the current value..
    }
});

However, this is pretty inefficient as it's changing the (although unattached) element's height CSS property needlessly. It's better to just use a "tweening" library such as Tween JS to do this kind of thing.

Answer 3

If you are looking to "spin" something, you can do that with css and therefore, you can use the jQuery animate function.