Last Updated: February 25, 2016
·
2.909K
· rayfranco

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;
}});

1 Response
Add your response

Thanks for the tip!

over 1 year ago ·