JQuery实现二级菜单，stop方法分析

效果图

完整效果图

一、HTML

    

        

            

                明星
                

                    
胡歌
                    
黄晓明
                    
马思纯
                
            
            

                演员
                

                    
李幼斌
                    
何冰
                    
胡军
                
            
            

                歌手
                

                    
蔡徐坤
                    
吴亦凡
                    
鹿晗
                
            
        
    

二、CSS

CSS没有什么，只需要稍微关注一下提到的细节点就行了。

        * {margin: 0px;padding: 0px;}
        
        ul {list-style-type: none;}
        
        a {text-decoration: none;color: black;}

        .wrapper {width: 300px;}

        .wrapper ul.nav::after {
            content: "";
            display: block;
            clear: both;
        }

        .wrapper ul li {
            height: 30px;
            /*  此处height是功能实现的关键，固定高度height==line-hieght使得：
             *  当ul.detail display时呈现overflow效果，不会额外占据地方，不会将wrapper撑大，
             */
            float: left;
            text-align: center;
            font-size: 14px;
            width: 100px;
            line-height: 30px;
            background-color: rgb(88, 187, 190);
            cursor: pointer;
        }

        .wrapper ul li:hover{color: white;}

        .wrapper ul li ul.detail {display: none;}

        .wrapper ul li ul li {background-color: rgb(129, 221, 224);}

        .wrapper ul li ul li:hover {background-color: rgb(178, 246, 248);}

细节点：

• 一级菜单是float：left，因此需要使用伪元素after清除浮动流；
• .wrapper ul li 需要设置 height==line-height ，使得当二级菜单显示时不会讲wrapper撑大，导致影响到后续元素的位置；固定height使得显示的二级菜单成为overflow的那部分；效果对比如下：

  • height == line-height == 30px

    
    
    height == line-height == 30px

  • height未指定，line-height==30px

    
    
    height未指定，line-height==30px

三、JQuery

重点：

• JQuery中动画队列的消除，stop方法的应用；
  • 直接使用不带参数，stop()方法会结束当前正字啊进行的动画，并立即执行队列中的下一个动画。
  • stop（）方法有两个参数，第一个参数clearQueue，将其设置为true，则会将当前元素接下来的尚未执行完的动画队列都清空。
  • 第二个参数gotoEnd，将其设置为true，可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。
• 网上很多代码的处理都是直接使用.stop().show("fast")以及.stop().hide("fast")但是在我暴力测试之下发现 有致命bug：在缓慢情况下能正常使用，在快速划过时会出错。
  
  stop()+stop()
• 那么.stop().show("fast")+.hide("fast")呢？ 实验表明也会有bug：
  
  stop()+null
• 那么.stop(true).show("fast")+.stop(true).hide("fast")呢？有bug
  
  .stop(true)+.stop(true)
• 那么.stop(true).show("fast")+.hide("fast")呢？有bug
  
  .stop(true)+null
• 等等等等、、、后续的就不在测试了..
• 最后我得到的最佳方法就是.stop(true,true).show("fast")+.hide("fast"),效果最佳，无bug
  
  .stop(true,true)+null

完整代码：链接：https://pan.baidu.com/s/1BavI1UGR_PzUPMernS4xmg 提取码：f0oa

本文为作者原创，未经允许，不得转载，违者必究！