title: jQuery animation on a link
body: <p>I have following HTML:</p>
  
  <pre><code>&lt;div class="olympics" style="display: block; position: absolute; left: 250px; top: px;"&gt;
  
     &lt;a style="display: inline-block; float: left; height: 20px; margin: 5px;" href="#"&gt;Link 1&lt;/a&gt;
     &lt;a style="display: inline-block; float: left;  height: 20px; margin: 5px;" href="#"&gt;Link 2&lt;/a&gt;
  
   &lt;/div&gt;​
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>$('.olympics a').hover(function() {
      $(this).animate({
          backgroundColor: "#aa0000",
          color: "#fff"
      }, 1000);
  }, function() {
      $(this).animate({
          backgroundColor: "#fff",
          color: "#aa0000"
      }, 1000);
  });​
  </code></pre>
  
  <p>Any idea why this animation does not work? <br /><br />
  jsfiddle demo here: <strong><a href="http://jsfiddle.net/Seefeld/NzhxH/13/" rel="nofollow">http://jsfiddle.net/Seefeld/NzhxH/13/</a></strong></p>