title: jQuery animate on click multiple times
body: <p>I am currently building a web app where I need to randomly generate text content and switch its color every time a button is clicked. </p>
  
  <p>At the moment, I'm trying to add some kind of animation to it, and here's what I'd like to obtain each time the button is clicked:</p>
  
  <ol>
  <li>The random class is added</li>
  <li>The div pops up from the bottom of the page with its opacity increasing</li>
  </ol>
  
  <p>I prepared a simplified JSFiddle to illustrate my point below.</p>
  
  <p><strong>Example</strong></p>
  
  <p><a href="http://jsfiddle.net/cdacx0tn/11/" rel="nofollow">http://jsfiddle.net/cdacx0tn/11/</a></p>
  
  <pre><code>var color = ["blue", "purple", "green"];
  
  $("#try-me").click(function() { 
      var colorClass = color[Math.floor(Math.random()*color.length)];
  
      $("#content")
      .removeClass()
      .addClass(colorClass)
      .animate({
          "margin-top": "50px",
          "opacity": "1"
      }, 700);
  });
  </code></pre>
  
  <p>I managed to get this done when the button is clicked once but I can't figure out how to do this <strong>each time</strong> it is clicked.</p>
  
  <p>I want to add that I'm not a professional developper so please be indulgent.</p>
  
  <p>Thanks for your help.</p>