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 eleme

Answer 1

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 2

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 3

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