Animating anything with jQuery
jQuery documentation on animate() won't tell a word about animating custom object properties.
What I was trying to achieve, is to step some custom code calls with easing (or not) intervals. Since one of my animations need some custom step based method calls to animate, CSS-properties-animation-only won't fit my needs.
Here is how I did :
// I need to step between 0 and 100, in 700ms
var from = {i:20},
to = {i:45};
$(from).animate(to,{duration: 700, step: function(step){
_this.someObject.goToStep(step);
}});
But for performance sake, I'd just call my goToStep method once. Maybe you'll also need to do something like this :
// I need to step between 0 and 100, in 700ms
var from = {i:20},
to = {i:45};
$(from).animate(to,{duration: 700, step: function(step){
var i = Math.round(this.i);
this.curr || (this.curr = i);
if (!this.curr || this.curr != i) {
// Here I can call my step based code
_this.someObject.goToStep(step);
}
this.curr = i;
}});Written by Franco Bouly
Related protips
1 Response
Thanks for the tip!
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Jquery
Authors
Did you know?
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#