jquery hover() mouseOut événement ne se déclenche pas lorsque la souris est déplacée rapidement sur le lien

Question

J'ai une liste de liens simples et lorsque vous passez dessus il ajoute un div (chargement des données dans ce div de XML) et en vol stationnaire il supprime la div , mais il ne se produit que lorsque la souris se déplace lentement sur les liens dès que la souris se déplace plus vite que d'habitude sur les liens, alors il ne supprime pas la div qui signifie événement mouseout n'a pas été tiré

Déplacez votre souris agressive sur les deux premiers liens alors vous pouvez voir que quelques fois div ne cache pas

Voici lien vers ma démo http://ukcatonline.com/template/

Voici mon 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') && $this.attr('title') != '' && $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 = '<div id="peek_container"><img src="' + imgurl + '" alt="" /><br /><br /><h1>'+title+'</h1><br />'; 
             html += '<p>' + description + '</p><br />'; 
             html += '<ul><li>'+feature1+'</li><li>'+feature2+'</li><li>'+feature3+'</li><li>'+feature4+'</li></ul><br /></div>'; 
             $this.parent().append(html); 
            } 
           ); 
          } 
         ); 
        } 
       } 
       ); 

      } 
     }); 

    }, 
    function (e) { 
     $this = $(this); 
     $this.stop().animate({ paddingLeft : '6px' }, 300); 
     $this.siblings().remove(); 
    } 
);}); 

Voici mon HTML:

<ul class="mainnav_v"> 
    <li><a href="#url" class="peek" title="Boss" id="designer_frames">Boss</a></li> 
    <li><a href="#url" title="Burberry" id="designer_frames">Burberry</a></li> 
    <li><a href="#url" title="Bvlgari" id="designer_frames">Bvlgari</a></li> 
    <li><a href="#url">Chanel</a></li> 
    <li><a href="#url">Diesel</a></li> 
    <li><a href="#url">Dior</a></li> 

Answer 1

Je ne suis pas sûr à 100%, mais mon sentiment est, l'appel de fonction pour obtenir le panneau via ajax devrait être un rappel de la fonction animée de survol.

La façon dont il est maintenant, l'animateur hover est «indépendant» de l'appel ajax. Je n'ai pas essayé cela, donc je peux me tromper. : P

Answer 2

En utilisant console.log() ou une autre méthode de journalisation, vous devriez être en mesure de déterminer si le mouseout se déclenche avant que le mouseover ait terminé d'ajouter du contenu ou s'il y a un autre problème.

Answer 3

Examinons un ordre infractionnels des opérations:

• souris au-dessus - Lancer Ajax Appel
• souris sur - retirer les frères et sœurs
• ajax succès - ajouter div.

Ajouter dans le fait que vous n'utilisez pas var $this de déclarer $this - il est donc mondial, le $this dans l'appel ajax pourrait être été écrasés.

Vous devriez probablement changer votre fonction pour créer et ajouter le <div> avant l'appel ajax, puis ajouter à plus tard (commentaires ajoutés):

$(document).ready(function() { 
    //vertical navigation js 
    $(".mainnav_v a").hover(function (e) { 
    // be sure to SCOPE your $this, so that the other function can't overwrite it 
    var $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') && $this.attr('title') != '' && $this.attr('id')==category) 
     { 
     brand= this.title; 
     // create div BEFORE ajax call, and append it to dom in a hidden state 
     var $results = $("<div id='peek_container'/>").hide(); 
     $this.parent().append($results); 
     $.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; 
      } 
      $(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 = '<img src="' + imgurl + '" alt="" /><br /><br /><h1>'+title+'</h1><br />'; 
       html += '<p>' + description + '</p><br />'; 
       html += '<ul><li>'+feature1+'</li><li>'+feature2+'</li><li>'+feature3+'</li><li>'+feature4+'</li></ul><br />'; 
       // set the html of the results object we made. 
       $results.show().html(html); 
       }); 
      }); 
      } 
     }); 
     } 
    }); 
    }, 
    function (e) { 
    var $this = $(this); 
    $this.stop().animate({ paddingLeft : '6px'  }, 300); 
    $this.siblings().remove(); 
    }); 
});