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
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#