title: JQuery background animation - is this the right way to do it?
body: <p>I'm trying to get the background of a menu to animate depending on the menu LI </p>
  
  <p>The script I have so far is <a href="http://jsfiddle.net/d9LHV/70/" rel="nofollow">http://jsfiddle.net/d9LHV/70/</a></p>
  
  <pre><code>$(function() {
      $('.top-nav ul li').mouseenter(function() {
          var position = $(this).position()
          $(this).parent().animate({
              'backgroundPosition': position.left}, {duration: 150})
      })
      .mouseout(function() {
          $(this).parent().animate({})
      })
  });
  </code></pre>
  
  <p>Seems to work but something feels off about the jQuery but I don't have any jQuery experience and would like some input.</p>
  
  <p>If I use a .hover or take out the .mouseout part the animation becomes jumpy and choppy.</p>
  
  <p>Is there a better way to get the result? Or is something off with my logic, because i don't understand why I need the empty mouseout to make it work smoothly.</p>