title: jquery: error in mouseenter() mouseleave() animation
body: <p>I am trying to create a vertical scroll menu in a sidebar of page with jquery with the following code:
  <code>HTML:</code></p>
  
  <pre><code>&lt;ul class="side-menu"&gt;
  &lt;li id="menu1" &gt;&lt;a href="#"&gt;Item-1&lt;/a&gt;
      &lt;ul class="inner-side-menu" id="menu1_inner"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="menu2"&gt;&lt;a href="#"&gt;Item-2&lt;/a&gt;
      &lt;ul class="inner-side-menu" id="menu2_inner"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="menu3"&gt;&lt;a href="#"&gt;Item-3&lt;/a&gt;
      &lt;ul class="inner-side-menu" id="menu3_inner"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="menu4"&gt;&lt;a href="#"&gt;Item-4&lt;/a&gt;
      &lt;ul class="inner-side-menu" id="menu4_inner"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub-item&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p><code>JQuery</code>:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#menu1').mouseenter(function(){
      $('#menu1_inner').show('slow');
  }).mouseleave(function(){
      $('#menu1_inner').hide('slow');
  });
  //Similar for #menu2, #menu3 and #menu4
  &lt;/script&gt;
  </code></pre>
  
  <p>I got a very weired error, in normal condition the code is working well but if i take the mouse over <code>#menu1/2/3/4</code> and leaves immediately than the respective <code>#menu_inner</code> animates two or three times seems like it animates with same effect multiple times without mouse enters or leaves.</p>
  
  <p>What is actually happening here? and what is the solution?
  p.s.:  I tested this in firefox 10, IE9, Maxthon 3 and Opera 11 with same error.</p>