Question

我有简单的链接列表，当你将鼠标悬停在它上面时会附加一个div（从这个div中加载数据来自XML）并在悬停时删除div，但只有当鼠标在链接上缓慢移动时才会发生鼠标移动比通常链接更快，然后它不会删除div，这意味着mouseout事件没有被触发

在前两个链接上积极移动鼠标然后你可以看到div有时不隐藏

以下是我的演示http://ukcatonline.com/template/

的链接

这是我的代码：

$(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();
    }
);});

这是我的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

我不是100％肯定，但我的直觉是，通过ajax获取面板的函数调用应该是悬停动画函数的回调。

现在的方式，悬停动画是'独立于'ajax调用。

我没试过这个，所以我可能错了。：P

Answer 2

让我们检查一下违规的操作顺序：

鼠标悬停 - 启动Ajax调用
鼠标移出 - 移除兄弟姐妹
ajax成功 - 追加div。

添加以下事实：您没有使用var $this来声明$this - 因此它是全局的，ajax调用中的$this可能会被覆盖。

您应该更改函数以在ajax调用之前创建并附加<div>，然后稍后追加（添加注释）：

$(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();
  });
});

Answer 3

使用console.log()或其他一些日志记录方法，您应该能够在mouseout完成添加内容之前确定mouseover是否正在触发，或者是否存在其他问题。

当鼠标在链接上快速移动时，jquery hover（）mouseOut事件未触发

3 个答案: