title: how do I repeat a simple jquery animation on repeated clicks
body: <p>This should be simple but cannot find the answer to this simple concept. In Jquery, I want to have a simple Jquery animation repeat itself after repeated clicks. ie to run on each click. I want the animation to run, then wait for a click before starting again from the beginning...I have tried resetting css height of the block in the callback of animate but this immediately takes the animation back to the beginning, I want it to wait till the next click before starting again.</p>
  
  <p>my CSS is</p>
  
  <pre><code>&lt;style&gt;
  .block {
  background-color: red;
  width: 100;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>the HTML is</p>
  
  <pre><code>&lt;div class="block"&gt;this is block &lt;/div&gt;
  &lt;div id="go"&gt;go&lt;/div&gt;
  </code></pre>
  
  <p>Jquery is </p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  $( "#go" ).click(function() {
  $(".block").animate({height:"300px"}, "slow", "linear" , function(){
  
  });
  });
  });
  </code></pre>
  
  <p></p>