1

I'm trying to force one animation to start after another ends, and according to documentation, I should include a callback function, which should be called at the end of animation.

However, both animations are performed simultaneously... what am I doing wrong?

http://jsfiddle.net/yBehH/

$(document).ready(function () {
    function drawBonuses() { 
        bonus = [3, 9, 10, 17];
        $.each(bonus,function(i,v) {
            gameboard.circle( v*20+20, 20, 0).animate( { fill: "#f00", r: 5 } , 100);
        });
    };

    gameboard = Raphael("gameboard", 440, 440);
    gameboard.clear();
    gameboard.rect(200, 200, 0, 0, 5).animate({fill: "#fff", height: 400, width: 400, x:20, y:20, stroke: "#000", "stroke-width": 20}, 2000, drawBonuses());
});

The dots should start animating when the board is completely animated...

GTMeteor
  • 807
  • 3
  • 9
  • 17

1 Answers1

2

Currently you have

obj.animate(..., drawBonuses());

i.e. drawBonuses is called immeadiately and the return value is passed to animate().
You want to pass the function itself:

    obj.animate(..., drawBonuses);

http://jsfiddle.net/yBehH/2/

VolkerK
  • 95,432
  • 20
  • 163
  • 226
  • Thank you! I was somewhy under impression that you can't call functions like that... that "()" was needed. Thanks again! – GTMeteor Mar 28 '13 at 09:27
  • You need the () for invoking the function. But you don't want to invoke it yourself when/before invoking `animate`. You want to pass the function so that `animate` can invoke it once the animation has ended. – VolkerK Mar 28 '13 at 09:30