如何停止关于函数的jQuery动画

Question

我有一个增加数字的功能，停在56,941。我还有一个div容器，动画到不同的宽度大小。

我希望div容器在函数停止后停止动画。这是我的代码：

/****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);    

这可能吗？谢谢！

Answer 1

把它放在适当的地方，我会在你清除间隔循环后说...

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

调用.stop()将停止选择器上的所有动画。

Answer 2

只需使用stop()函数 - http://api.jquery.com/stop/ - 过早结束jQuery动画函数，在您的情况下将是：

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