关于jquery的animate使用
大家帮忙看看以下代码在执行动画的高度收回来的最后一点时为什么有点卡？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/
html; charset=utf-8" />
<title></title>
<style>
body,div,ul,p,h1,h2,h3.img{ margin:0;padding:0;}
ul li{list-style-type:none;}
a{ font-size: 1.0625em; text-decoration: none; color:#565656;}
#landing{ overflow:hidden;}
.fblod{ color: #fff!important; font-weight:blod!important; background: #76afe0!important;}
ul#landing li{ float:left; width:32.4%; height:36px; line-height: 36px; background: #ebf2f7; color: #2a70be; margin: 0 5px 0 0; text-align:center;}
ul#landing li:nth-child(3){ margin-right: 0;}
ul#landing li:nth-child(4){ width:99.8%; height:136px; display:none; position: relative; padding-top: 26px;}
input,select{display:block; margin: 0 0 10px 20px; width:56%; height:35px;border:1px solid #669fdf; border-radius:5px;}
select{ height: 30px;}
input:nth-child(2){ margin-bottom: 3px;}
input:nth-child(4){ width:70px; height:72px; background-image:linear-gradient(to top,#669fdf,#3177c5); color:white; position:absolute;left:60%;top:66px; }
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<!--点击展开登陆-->
<ul id="landing">
<li onclick ="changeselect('select','1')">TAB1</li>
<li onClick="changeselect('select','2')">TAB2</li>
<li onClick="changeselect('select','3')">TAB3</li>
<li></li>
</ul>
<script>
$('#landing li:eq(0),#landing li:eq(1),#landing li:eq(2)').click(function(){
$('#landing li:eq(3)').animate({height:'toggle'},1000);
})
</script>
</body>
</html>
冬天里的阳光1回答
-
习惯受伤
把你代码中 ul#landing li:nth-child(4) 这一个样式里的 padding-top: 26px; 去掉就好了。原因是有了padding，那么这个元素高度就变成了26了，所以toggle时，高度从26开始，缩小的时候到26时，隐藏，所以造成了卡顿的假象
随时随地看视频慕课网APP
相关分类
JQuery