zoukankan      html  css  js  c++  java
  • JQuery 修正动画延迟

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>通过stop()修正动画延迟</title>
        
        
        <style type="text/css">
            body{
                font-family:'Microsoft Yahei';
            }
            body,ul{
                margin:0px;
                padding:0px;
            }
            
            ul{list-style:none;}
    
    
            .menu{
                width:200px;
                margin:20px auto 0;
            }
    
            .menu .level1,.menu li ul a{
                display:block;
                width:200px;
                height:30px;
                line-height:30px;
                text-decoration:none;
                background-color:#3366cc;
                color:#fff;
                font-size:16px;
                text-indent:10px;            
            }
    
            .menu .level1{
                border-bottom:1px solid #afc6f6;
                
            }
    
            .menu li ul a{
                font-size:14px;
                text-indent:20px;
                background-color:#7aa1ef;
                        
            }
    
            .menu li ul li{
                border-bottom:1px solid #afc6f6;
            }
    
            
    
            .menu li ul{
                display:none;
            }
    
            .menu li ul.current{
                display:block;
            }
    
            .menu li ul li a:hover{
                background-color:#f6b544;
            }
    
    
        </style>
        
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    
        <script type="text/javascript">
            //创建层级菜单.   使用两级元素, 一级一直显示, 二级在点击的时候显示, 并且取消其他级别显示则可;
    
            $(function(){
    
                $(".level1").click(function(){
                    $(this).siblings().stop().slideToggle(300).parent().siblings().children("ul").slideUp(300);
    
                    // 连续点击的时候,  记录次数,并且一次一次完成.
                    // 在动画函数前面增加stop()语句, 能够在下次点击的时候终止前一次的动画, 避免冗余操作带来的不利观感.
                    // 要加在 点击所产生的动画上面
    
    
    
                })
    
    
    
            })
    
    
    
    
        </script>
    </head>
    <body>
        <ul class="menu">
            <li>
                <a href="#" class="level1">水果</a>
                <ul class="current">
                    <li><a href="#">苹果</a></li>
                    <li><a href="#">梨子</a></li>
                    <li><a href="#">葡萄</a></li>
                    <li><a href="#">火龙果</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="level1">海鲜</a>
                <ul>
                    <li><a href="#">蛏子</a></li>
                    <li><a href="#">扇贝</a></li>
                    <li><a href="#">龙虾</a></li>
                    <li><a href="#">象拔蚌</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="level1">肉类</a>
                <ul>
                    <li><a href="#">内蒙古羊肉</a></li>
                    <li><a href="#">进口牛肉</a></li>
                    <li><a href="#">野猪肉</a></li>                
                </ul>
            </li>
            <li>
                <a href="#" class="level1">蔬菜</a>
                <ul>
                    <li><a href="#">娃娃菜</a></li>
                    <li><a href="#">西红柿</a></li>
                    <li><a href="#">西芹</a></li>
                    <li><a href="#">胡萝卜</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="level1">速冻</a>
                <ul>
                    <li><a href="#">冰淇淋</a></li>
                    <li><a href="#">湾仔码头</a></li>
                    <li><a href="#">海参</a></li>
                    <li><a href="#">牛肉丸</a></li>
                </ul>
            </li>
            
        </ul>
    </body>
    </html>
  • 相关阅读:
    uva-10160-枚举
    zk-systemd
    c++官方文档-枚举-联合体-结构体-typedef-using
    c++官方文档-动态内存
    c++官方文档-指针
    c++官方文档-命名空间
    c++官方文档-模版函数和重载
    c++官方文档-按值传递和按引用传递
    c++官方文档
    HDU 1068
  • 原文地址:https://www.cnblogs.com/jrri/p/11347584.html
Copyright © 2011-2022 走看看