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?

According to the JQuery animate doc api.jquery.com/animate: "In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated." — mjhm
– mjhm, Commented Oct 16, 2012 at 14:21

georg · Accepted Answer · 2013-05-31 12:57:56Z

67

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/

answered May 31, 2013 at 12:57

community wiki

georg

Sign up to request clarification or add additional context in comments.

5 Comments

funrob Over a year ago

This is what I was looking for. I don't want any DOM element's attributes, styles or JavaScript properties changed.

Ch'marr Over a year ago

Note that the starting value must be zero. So, it's probably easier to assume an ending value of "1" and do your own progress calculation: val = start_val*(1-val) + end_val*val;

Derek 朕會功夫 Over a year ago

@Ch'marr jQuery seems to support any initial value right now.

Triynko Over a year ago

Why does the starting value have to be zero? That's ridiculous. Also, restricting the range from zero to one and doing your own easing calculation almost defeats the purpose of using this method in the first place.

vsync Over a year ago

where do you set the duration?

Mark Rhodes · Accepted Answer · 2013-10-20 21:27:52Z

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.

edited Oct 20, 2013 at 21:27

answered Apr 18, 2013 at 15:20

Mark Rhodes

10.2k4 gold badges52 silver badges51 bronze badges

Comments

Spycho · Accepted Answer · 2011-11-16 15:48:16Z

0

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

answered Nov 16, 2011 at 15:48

Spycho

7,7983 gold badges36 silver badges55 bronze badges

Collectives™ on Stack Overflow

jQuery animate of custom value (not a CSS property)

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related