CODEWITHSUNDEEP
jqueryanimation
Richard
Richard

Reputation: 1464

How to stop jQuery animation about a function is done

I have a function that increases a number and stops at 56,941. I also have a div container that animates to a different width size.

I would like the div container to stop animating once the function stops. Here's my code:

/****COUNTER****/

jQuery.fn.extend({
      ts : function (from, to, time) {
        var steps = 1,
            self = this,
            counter;

        if (from - to > 0) {
          steps = -1;
        };

        from -= steps;

        function step() {
          self.text(addCommas(from += steps));

          if ((steps < 0 && to >= from) || (steps > 0 && from >= to)) {
            clearInterval(counter);
          };
        };

        counter = setInterval(step, time || 5);
      }
    });


    var total = $('.total').ts(56100,56941);




    /****COMMA***/

    function addCommas(nStr)
    {
      nStr += '';
      x = nStr.split('.');
      x1 = x[0];
      x2 = x.length > 1 ? '.' + x[1] : '';
      var rgx = /(\d+)(\d{3})/;
      while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
      }
      return x1 + x2;
    }


    /****BAR****/



    $('.bar').animate({width: "21%",},5000);

Is this possible to do? Thank you!

Upvotes: 0

Views: 101

Answers (2)

doublesharp
doublesharp

Reputation: 27599

Just use the stop() function - http://api.jquery.com/stop/ - to prematurely end jQuery animation functions, which in your case would be:

$('.bar').stop();

Upvotes: 1

Billy Moon
Billy Moon

Reputation: 58521

Put this in the appropriate place, I would say just after you clear the interval loop...

...
clearInterval(counter);
// stop the animation here...
$('.bar').stop();
...

Calling .stop() will stop all animations on your selector.

Upvotes: 1

Related Questions