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?
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.
Syntax. Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
The jQuery animate() method is used to create custom animations.
An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear .
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With