jquery - 如何停止关于函数的 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();