大家帮忙看看以下代码在执行动画的高度收回来的最后一点时为什么有点卡？<!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 回答
已采纳
习惯受伤
TA贡献885条经验 获得超1144个赞
把你代码中 ul#landing li:nth-child(4) 这一个样式里的 padding-top: 26px; 去掉就好了。原因是有了padding，那么这个元素高度就变成了26了，所以toggle时，高度从26开始，缩小的时候到26时，隐藏，所以造成了卡顿的假象
- 1 回答
- 1 关注
- 1091 浏览
添加回答
举报
0/150
提交
取消