title: jQuery .animate .stop
body: <p>My "stop" button does not work properly. Usually the first time the animation keeps going and then it works after that. I'd also like to know how to return the div's height when stop is clicked and display it. </p>
  
  <pre><code>//HTML
  &lt;div id = "wrapper"&gt;
  &lt;div id = "container"&gt;
      &lt;div id = "meter"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;button id ="start"&gt;START&lt;/button&gt;
  &lt;button id ="stop"&gt;STOP&lt;/button&gt;
  &lt;/div&gt;
  
  //CSS
  #wrapper {
      height: 100%; width: 100%;
      text-align: center;
  }
  #container {
      height: 300px; width: 60px;
      background-color: yellow;
      display: block;
      margin: 20px auto;
      position: relative;
  }
  #meter {
      height: 0;
      width: 50px;
      position: absolute;
      bottom: 0px;
      background-color: blue;
      margin: 0 5px;
  }
  button {
      width: 75px;
      height: 30px;
      background-color: red;
      border-radius: 15px;
      position: relative;
      float: left;
      display: inline-block;
  }
  
  //Javascript
  $(document).ready(function() { 
      $('#start').on('click', function () {
          for(var i = 0; i&lt;100; i++) {    
              $("#meter").animate({height:300}, 1000);
              $("#meter").animate({height: 0}, 1000);
              $('#stop').on('click', function () {  
                  $("#meter").stop();
              });
          }
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2p3xj01j/" rel="nofollow">http://jsfiddle.net/2p3xj01j/</a></p>