如何停止關於函數的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();