jQuery实现仿京东防抖动菜单效果示例

本文实例讲述了jQuery实现仿京东防抖动菜单效果。分享给大家供大家参考，具体如下：

完整代码：

防抖动

  

    
热点要闻
    
个性推荐
    
北京新闻
    
环球视野
  
  

    

      

        

          
618，刘强东笑了，很多人哭了
        
        

          
普通人如何分享人民币增值红利
        
        

          
大都市里藏板房小学闷热无比 
        
      
    
    

      

        

          
中国炼油产能过剩超亿吨 油价迫近4元降回到十年前
        
        

          
银行大幅上调首套房贷利率 这些人最受影响
        
        

          
江南大范围强降雨再次来袭 今明北方旱区多雷阵雨
        
      
    
    

      

        

          
京郊特产组团进超市 类似活动将在全市推开
        
        

          
北京某高档小区地下二层防空洞改群租房
        
        

          
北京市民踊跃收听收看市党代会开幕直播
        
      
    
    

      

        

          
英国推出“钱味香水”：随时感受钞票味儿
        
        

          
美国是如何买下阿拉斯加的？为何俄国悔不当初？
        
        

          
将增近4000人，美国为何欲大幅增兵阿富汗？
        
      
    
  

使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

问题：鼠标第一次移入的时候是不需要延迟的，所以加入了mouseFlag

优化后的JS为

$(function(){
  var _catTimer;
  var _mouseflag;
  var $menu = $("#menu");
  var $menuItem = $menu.find(".menu_list").children("li");//菜单
  var $menuCont = $menu.find(".menu_cont");//容器
  var $menuContItem = $menuCont.children("div");//
  $menuCont.hide();//默认隐藏容器窗口
  $menuItem.on("mouseenter", function(){
    var self = $(this);
    if(!_mouseflag){
      showCont(self);
      _mouseflag = true;
    }else{
      _catTimer = setTimeout(function(){
        showCont(self)
      },300)
    }
  }).on("mouseleave", function(){
    if(_catTimer){
      clearTimeout(_catTimer);
    }
  })
  $menu.on("mouseleave",function(){
    $menuCont.hide();
    $menuItem.removeClass("current");
  })
  var showCont = function (self) {
    self.addClass("current");
    self.siblings().removeClass("current");
    $menuCont.show();//显示容器窗口
    var _index = self.index();//获取位置
    $menuContItem.eq(_index).show();
    $menuContItem.eq(_index).siblings().hide();
  }
})

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。