Question

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

Move your mouse aggressively on first two links then you can see that div some times doesn’t hide

Here is link to my demo http://ukcatonline.com/template/

Here is my 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();
    }
);});

Here is my 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

I am not 100% sure but my gut feeling is, the function call to get the panel via ajax should be a callback of the hover animate function.

The way it is now, the hover animate is ‘independent’ of the ajax call.

I’ve not tried this so I might be wrong. 😛