项目-namelist
2018-10-30 本文已影响0人
子却
该姓名列表想要实现的功能是：列表展开时有个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>
