title: jQuery Animate text-color on hover
body: <p>Using the following code, trying to get the font color to animate on hover, similar to how I have the border-bottom-color animating. Changing the border-bottom-color works well but the font color just won't seem to change. A full example can be seen here:  <a href="http://www.buenolisto.com/alma" rel="nofollow">http://www.buenolisto.com/alma</a>. Any help is greatly appreciated. I am also already calling the jQuery UI in with: <a href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js</a></p>
  
  <pre><code>jQuery("li.social").hover(function() {
  jQuery(this).find("img").stop(true, true).animate({
      'marginTop': "-=20px"
  }, 'fast');
  }, function() {
  jQuery(this).find("img").stop(true, true).animate({
      'marginTop': "+=20px"
  }, 'fast');
  })
  jQuery("li.reservas").hover(function() {
  jQuery(this).find("img").stop(true, true).fadeOut({
      'marginTop': "-=30px"
  }, 'slow');
  }, function() {
  jQuery(this).find("img").stop(true, true).fadeIn({
      'marginTop': "+=30px"
  }, 'slow');
  })
  jQuery("ul.menu li").hover(function() {
  jQuery(this).find("a").stop(true, true).animate({
      'borderBottomColor': '#2E9ECE',
      'color': '2E9ECE'
  }, 'slow');
  }, function() {
  jQuery(this).find("a").stop(true, true).animate({
      'borderBottomColor': '#FFDF85',
      'color': 'FFDF85'
  }, 'slow');
  })​
  </code></pre>