title: jquery/ui menu mouseover/out/click animation issue
body: <p>I ran into a problem while trying to create a navigation menu.
  I defined three function using jqueryui, an onmouseover function, an onmouseout function and an onclick function.
  The first to are used to emulate a hover effect and the last one to change selections.
  It all works great unless I remove the mouse from the clicked option, before the select animation finishes.</p>
  
  <p>Here is the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="inav"&gt;
      &lt;li class="opt selected"&gt;Option1&lt;/li&gt;
      &lt;li class="opt"&gt;Option2&lt;/li&gt;
      &lt;li class="opt"&gt;Option3&lt;/li&gt;
      &lt;li class="opt"&gt;Option4&lt;/li&gt;
      &lt;li class="opt"&gt;Option5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body
      {
          background: #000;
      }
  #inav
      {
          display: block;
          width: 300px;
          height: 400px;
          float: left;
          margin: 0;
          padding: 0;
          padding-top: 60px;
          background: url('../img/nbg.png');
      }
  .opt
      {
          display: block;
          width: 100%;
          height: 40px;
          list-style: none;
          color: #FFF;
          font-size: 1.7em;
          text-align: center;
          cursor: pointer;
          padding-top: 10px;
          text-shadow: 0 0 1px #FFF;
      }
  .selected
      {
          background: #00F;
      }
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$('.opt').mouseover(function(){
      $(this).animate({backgroundColor: '#F00'}, 400 );
  });
  $('.opt').mouseout(function(){
      if($(this).hasClass('selected'))
      {
          $(this).animate({backgroundColor: '#00F'}, 400 );
      }
      else
      {
          $(this).animate({backgroundColor: 'transparent'}, 400 );
      }
  });
  $('.opt').click(function(){
      if(!$(this).hasClass('selected'))
      {
          $('.selected').animate({backgroundColor: 'transparent'}, 400, function(){
              $('.opt').removeClass('selected');
          });
          $(this).animate({backgroundColor: '#00F'}, 400, function(){
              $(this).addClass('selected');
          });
      }
  });
  </code></pre>
  
  <p>Here is a working example of the code: <a href="http://jsfiddle.net/mz5HC/26/" rel="nofollow"><strong>CLICK HERE</strong></a></p>
  
  <p>I know the problem is that the onmouseover function is running when it should not, but I have no idea why or how to fix it.</p>
  
  <p>Any help is appreciated.</p>