1

我有一个简单的链接列表，当您将鼠标悬停在它上面时，它会附加一个 div（从 XML 加载此 div 中的数据），并且在悬停时它会删除 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>

4

3 回答 3

2

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

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

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

于 2009-12-24T07:41:35.073 回答
1

让我们检查一个有问题的操作顺序：

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

var $this加上您不使用声明的事实$this- 因此它是全局的，$thisajax 调用中的 可能会被覆盖。

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

$(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();
  });
});
于 2009-12-24T07:57:40.800 回答
0

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

于 2009-12-24T07:51:42.110 回答