0

I've got a recursing function that's stepping the animation of an element on the page:

_this = this;
this.x = 0, this.y = 0;
this.targX = 5, this.targY = 5; 

this.go = function(){
    var xDir = 0, yDir = 0, finished = false;

    if(this.x>this.targX){
        console.log("Reverse x");
        xDir = -1;
    }else if(this.x<this.targX){
        console.log("Forward x");
        xDir = 1;
    }else{
        xDir = 0;
        if(this.y>this.targY){
            console.log("Reverse y");
            yDir = -1;
        }else if(this.y<this.targY){
            console.log("Forward y");
            yDir = 1;
        }else{  finished = true;  }
    }
    this.x+= xDir;
    this.y+= yDir;

    if(finished==false){
        this.$c.animate({
            left: "+="+32*xDir,
            top: "+="+32*yDir
        }, 200, _this.go());
    }
}

Hopefully this is clear from the code, but the animation is supposed to step in the x-direction first until this.x = this.targX, then step in the y-direction until this.y = this.targY. In this case, the element goes right 5 steps, then down 5 steps.

However, in practice, the animation goes down 5 steps then right 5 steps - as if the animation queue is being reversed. If I remove the _this.go() call on success, the element goes right one step and stops - so I know I don't have my axes confused somewhere. The console logging even reports in the correct order:

Forward x
Forward x
Forward x
Forward x
Forward x
Forward y
Forward y
Forward y
Forward y
Forward y

What's going on here, why is the animation queue executing in reverse? Am I doing something wrong, or is this expected behavior for JQuery?


EDIT: Fiddle here: http://jsfiddle.net/WdYvB/

4
  • Any chance you could set up a fiddle? Jun 19, 2013 at 18:28
  • 1
    You are calling _this.go() and passing its result to animate() instead of passing the method itself. Jun 19, 2013 at 18:44
  • He's right -- use _this.go instead of _this.go() Jun 19, 2013 at 18:45
  • Wow, blew my mind. This explains a couple of other problems I was having too. Thanks so much! Post as an answer and I'll accept it.
    – CodeMoose
    Jun 19, 2013 at 18:48

2 Answers 2

3

By writing:

this.$c.animate({
    left: "+=" + 32 * xDir,
    top: "+=" + 32 * yDir
}, 200, _this.go());

You're actually calling go() and passing the value it returns (undefined in our case) to animate().

You should pass the function itself instead:

this.$c.animate({
    left: "+=" + 32 * xDir,
    top: "+=" + 32 * yDir
}, 200, _this.go);
0
0

Your callback function is being called when you are assigning the callback.

  if(finished==false){
        this.$c.animate({
            left: "+="+32*xDir,
            top: "+="+32*yDir
        }, 200, _this.go());  // should be _this.go 
    }
1
  • Excellent answer, spot-on - Frederic just beat you to it =/
    – CodeMoose
    Jun 19, 2013 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.