Last Updated: February 25, 2016
·
3.299K
· 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 ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
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