hover 延迟

   前面欠下的债果然是要还的，之前做的仿京东的下拉菜单，果然还是有hover的问题，当时被赶着做完，自己体验就不太好，果然暴露了，问题就是hover太灵敏了

原文：点击打开链接 二级浮动菜单

    比如（公司不能截图好痛苦~）下面A，B两个li,悬浮上去，要求右侧出现一个div，显示A或者B的详细内容（也是ul li）的结构，那么用户滑到A上，A的详情出来了，鼠标又不小

心划到B位置，不想看到的B的详情又出来了。。。。。我查了动画，过渡。。似乎都没有解决方案，还好之前有看张鑫旭大神的一篇文章，凭着记忆找出来了

   A

----------

   B

JS代码见下：

(function($){
      $.fn.hoverDelay = function(options){
        var defaults = {
          hoverDuring: 300,
          outDuring: 300,
          hoverEvent: function(){
            $.noop();
          },
          outEvent: function(){
            $.noop();
          }
        };
        var sets = $.extend(defaults,options || {});
        var hoverTimer, outTimer;
        return $(this).each(function(){
          $(this).hover(function(){
            clearTimeout(outTimer);
            hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
          },function(){
            clearTimeout(hoverTimer);
            outTimer = setTimeout(sets.outEvent, sets.outDuring);
          });
        });
      }
    })(jQuery);

html代码见内，就是给A，B每一个条目加上这个function，详情的展示就有了延时，不会出现上面描述的问题，这里还有this指针的问题，查了一阵。。。

$("#menu-ul .nav_item").each(function () {
      var that = $(this);
      $(this).hoverDelay({
        hoverEvent:function(){
          that.find('.nav_item_color').css('color','#1898eb');
         
          that.find('.sub_menu').show();
        },
        outEvent:function(){
         
          that.find('.nav_item_color').css('color','#000000');
          that.find('.sub_menu').hide();
        }
      });
    })