Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery animate of custom value (not a CSS property)

Tags:

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?

like image 488
Epsiloncool Avatar asked Nov 16 '11 15:11

Epsiloncool


People also ask

Can the animate () method be used to animate any CSS property?

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.

What do you need to pass to the custom animate () function?

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.

Which among the given below methods in jQuery can be used to create custom animations with exclusive control?

The jQuery animate() method is used to create custom animations.

What does an easing do jQuery?

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 .


1 Answers

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/

like image 189
georg Avatar answered Feb 02 '23 23:02

georg