title: jquery fading in background color property on hover?
body: <p>I've got a small piece of code that isn't working, take a look:</p>
  
  <pre><code>$(document).ready(function() {
      $('ul#mainmenu li:hover').css({backgroundColor:''});
      $('ul#mainmenu li').hover(function() {
          $(this).animate({backgroundColor:'#2E8AE5'}, slow);
      });
  });
  </code></pre>
  
  <p>It's meant to:</p>
  
  <p>1) unset the CSS property <code>background-color</code> from a list item with the pseudo-class <code>:hover</code> in the unordered list with an id of mainmenu (this is so those without Javascript enabled can still experience a similar effect to what I'm trying to achieve with jQuery)</p>
  
  <p>2) When the same list item is then hovered over, it should animate in the background-color on said list item.</p>
  
  <p>But it doesn't. Instead, the first task isn't even completed, let alone animating in the background on hover. It's worth noting that I have triple checked my elements (I even copied them and pasted them into the script to make sure). </p>
  
  <p>And I am using jQuery UI - which I understand can perform such tasks involving animating certain CSS properties. Ideas?</p>