Multiple startAnimation calls doesn't work

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Initialise flipcounter with some basic options.
2. Bind a function to onAnimationStopped option
3. In that function do a flipcounter startAnimation which sets the number 
option to: getNumber + 500.
4. When document is ready call step() for the first time initially.

What is the expected output? What do you see instead?
I except the animation just to keep on going and each time incrementing by 500.

What version of the product are you using? On what operating system?
1.1, Windows 7, FF5

Please provide any additional information below.

      $(document).ready(function() {
        $("#counter").flipCounter({
            number: 0, // the initial number the counter should display, overrides the hidden field
            formatNumberOptions: {
              format:"$000,000,000,000,000",
              locale:"us"
            },
            digitClass:"counter-digit", // class of the counter digits
            counterFieldName:"counter-value", // name of the hidden field
            digitHeight:40, // the height of each digit in the flipCounter-medium.png sprite image
            digitWidth:30, // the width of each digit in the flipCounter-medium.png sprite image
            imagePath:"img/flipCounter-medium.png", // the path to the sprite image relative to your html document
            onAnimationStarted:false, // call back for animation upon starting
            onAnimationStopped:step, // call back for animation upon stopping
            onAnimationPaused:false // call back for animation upon pausing
        });
        step();
      });

      function step()
      {
        $("#counter").flipCounter(
          "startAnimation", 
          {
            number: parseInt(($("#counter").flipCounter("getNumber") + 500)),
            //easing: jQuery.easing.easeInOutQuad,
            duration: 3000
        });
      }

I've fixed this problem by editing the 1.1 source code. I've added a function:
  // Remove an option
  function _removeOption(option) {
    data.remove(option);
  }

Which is called at the end of _stopAnimation():

    // Stop animation
    function _stopAnimation() {

        if(true !== _getOption('animating')) return false;

        clearInterval(_getOption('interval'));
        _setOption('number', _getOption('end_number'));
        _setOption('start_number', null);
        _setOption('end_number', null);
        _setOption('timer', 0);
        _setOption('animating',false);

        var onAnimationStopped = _getOption('onAnimationStopped');
        if(typeof onAnimationStopped == 'function') onAnimationStopped.call(obj, obj);
        _removeOption('onAnimationStopped');
    }

With this possibility I can determine my own pace of the animation. I could 
increment numbers for x seconds then wait x seconds and increment again. This 
gives a bit more flixibility.

Original issue reported on code.google.com by willem....@gmail.com on 18 Aug 2011 at 6:44

[GoogleCodeExporter]

It seems that my fix wasn't really a fix. It causes a JavaScript error which 
somehow gave the expected functionality.

I'm figuring out how to actually fix this problem now. So ignore the fix in the 
ticket for now. The problem still exists though.

Original comment by willem....@gmail.com on 18 Aug 2011 at 7:04

[GoogleCodeExporter]

I've found the problem. It seems that the option 'time' is somehow never reset 
to 0 in _doAnimation. I've been following that variable and it keeps 
incrementing no matter what I do.
It's almost as if the _doAnimation function is running in its own instance and 
has its own set of options once it's started. And that set of options can't be 
manipulated outside of that function.
I've done the following to fix it. Maybe it's not a clean fix, but at least it 
works for me.

    // Do animation step
    function _doAnimation() {

        var time = _getOption('time');
        var start_number = _getOption('start_number');
        var number_change = _getOption('end_number') -  start_number;
        var duration = _getOption('duration');
        var easing = _getOption('easing');

        // apply easing function
        var new_num = easing.apply(obj, [false, time,start_number,number_change,duration]);

        _setOption('number', new_num);
        _renderCounter();

        if(time >= duration) {
            _stopAnimation(); // if animation has expired, stop it
        }

        if(time >= duration) {
            _stopAnimation(); // if animation has expired, stop it
        _setOption('time', 0); // clear time step
        }
      else
      {
        _setOption('time',time+1); // increase time step
      }
    }

Original comment by willem....@gmail.com on 18 Aug 2011 at 7:49

Attachments:

• jquery.flipCounter.1.1.js

[GoogleCodeExporter]

Ah I've only know come to see that this is the project page for 
jquery-numberformatter. I'm posting on the wrong project page. I'm very sorry. 
You can delete and ignore this ticket completely.

Original comment by willem....@gmail.com on 18 Aug 2011 at 7:58

[GoogleCodeExporter]

No worries, removed. I was a little curious when I saw the title :P

Original comment by apar...@gmail.com on 7 Sep 2011 at 3:39

• Changed state: Invalid