<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("div").slideUp();
});
$(".btn2").click(function(){
$("div").slideDown();
});
});
</script>
<style>
div{
width:200px;
background:red;
padding:30px;
box-sizing:border-box;
margin-top:10px;
}
</style>
</head>
<body>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<div>
<p>This is a block.</p>
<p>This is a block.</p>
<p>This is a block.</p>
</div>
</body>
</html>运行结果：
当点击show按钮时，下滑过程中会出现反弹
经过测试，这是由于设置box-sizing:border-box 与padding的原因
去掉box-sizing 就可以了。
如若在滑动过程中出现抖动现象，则在slideDown调用之前先stop
例：$(currentElement).stop(true).slideDown("fast");
1912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
