项目-namelist

作者: 子却 | 来源:发表于2018-10-30 19:41 被阅读0次

项目-namelist
关于"Invalid character found in me
java数组声明和变式--record1
Python中的字典
12章动动手
Vue开发中的问题
Java 持有对象以及泛型基础
WRF快速增减wrfout输出变量
制作字幕002：翻译格式和规范
WRF微物理过程

该姓名列表想要实现的功能是：列表展开时有个slideDown特效，且单击名字会淡出。
在给列表添加特效时出现了一个小问题：如果将slideDown特效添加给<ul>元素，最后整个列表在特效结束后会有个上移的动作。但若将slideDown添加给<li>就不会有这一动作。
最后，为了让列表更圆滑的展开，采用了对<li>元素设置不同的特效延迟时间的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery L3</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <style>
        h1{
            text-align: center;
        }
        ul{
            list-style-type: none;
        }
        li{
            width: 300px;
            border: 1px solid rgb(136, 92, 92);
            border-radius: 10px;
            background-color: rgb(102, 127, 150);
            margin:10px auto;
            text-align: center;
            font-size: 1.2em;
        }
    </style>
</head>
<body>    
    <h1>name list</h1>
    <ul>
        <li>Tom</li>
        <li>Lily</li>
        <li>Nancy</li>
    </ul>    
    <script>
        $(function(){
           $("h1").hide().slideDown(1000);
           //$("ul").hide().delay(1000).slideDown(2000);同样的特效，给ul添加会使得列表有上移的效果，给li添加则不会有上移效果。
           //$("li").hide().delay(1000).slideDown(2000);
           $("li").hide().each(function(index){
                $(this).delay(700 * (index+1)).slideDown(700);
            });
           $("li").on("click",function(){
               $(this).fadeOut(700);
           })
        })
    </script>
</body>
</html>