title: jquery hover() mouseOut event not firing when mouse is moved quickly over link
body: <p>I have simple link list and when you hover over it it appends a div (loading data in this div from XML) and on hover out it removes the div, but it only happens when mouse moves slowly over the links as soon as mouse moves more fast then usual over the links then it doesn't remove the div which means mouseout event was not fired</p>
  
  <p>Move your mouse aggressively on first two links then you can see that div some times doesn't hide  </p>
  
  <p>Here is link to my demo <a href="http://ukcatonline.com/template/" rel="nofollow noreferrer">http://ukcatonline.com/template/</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>$(document).ready(function () { 
  
  //vertical navigation js
  $(".mainnav_v a").hover(
      function (e) {
          $this = $(this)
          $this.stop().animate({  paddingLeft : '16px'}, 300);
  
          var brand ="";
          var category="designer_frames";
          $this.each(function() 
          {
              var title = this.title;
              if ($this.is('a') &amp;&amp; $this.attr('title') != '' &amp;&amp; $this.attr('id')==category)
              {  
                  brand= this.title;
  
                  $.ajax({
                      type: "GET",
                      url: "xml/peek_menu.xml",
                      //ie bug : it send wrong datatype on localmachine
                      dataType: ($.browser.msie) ? "text" : "xml",
                      success: function(data) {
                          var xml;
                           if (typeof data == "string") {
                             xml = new ActiveXObject("Microsoft.XMLDOM");
                             xml.async = false;
                             xml.loadXML(data);
                           } else {
                             xml = data;
                           }
                          //could have used $(xml).find(category).each(function() but jquery is intelligent enough to know wat element is currently selected
                          $(category, xml).each(
                              function(){
                                  $(brand,this).each(
                                      function(){
                                          var title = $(this).attr('title');
                                          var imgurl = $(this).attr('imgurl');
                                          var description = $(this).find('description').text();
                                          var feature1 = $(this).find('feature1').text();
                                          var feature2 = $(this).find('feature2').text();
                                          var feature3 = $(this).find('feature3').text();
                                          var feature4 = $(this).find('feature4').text();
  
                                          var html =  '&lt;div id="peek_container"&gt;&lt;img src="' + imgurl + '" alt="" /&gt;&lt;br /&gt;&lt;br /&gt;&lt;h1&gt;'+title+'&lt;/h1&gt;&lt;br /&gt;';
                                          html += '&lt;p&gt;' + description + '&lt;/p&gt;&lt;br /&gt;';
                                          html += '&lt;ul&gt;&lt;li&gt;'+feature1+'&lt;/li&gt;&lt;li&gt;'+feature2+'&lt;/li&gt;&lt;li&gt;'+feature3+'&lt;/li&gt;&lt;li&gt;'+feature4+'&lt;/li&gt;&lt;/ul&gt;&lt;br /&gt;&lt;/div&gt;';
                                          $this.parent().append(html);
                                      }
                                  );
                              }
                          );
                      }
                  }
                  );
  
              }
          });
  
      },
      function (e) {
          $this = $(this);
          $this.stop().animate({  paddingLeft : '6px' }, 300);
          $this.siblings().remove();
      }
  );});
  </code></pre>
  
  <p>Here is my HTML: </p>
  
  <pre><code>&lt;ul class="mainnav_v"&gt;
    &lt;li&gt;&lt;a href="#url" class="peek" title="Boss" id="designer_frames"&gt;Boss&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url" title="Burberry" id="designer_frames"&gt;Burberry&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url" title="Bvlgari" id="designer_frames"&gt;Bvlgari&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Chanel&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Diesel&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#url"&gt;Dior&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p></p>