jQuery 的折叠动画 + jQuery 提供了三种折叠动画 ( 看之前参考一下13 )
1. slideDown()
+ 下拉显示
2. slideUp()
+ 上拉隐藏
3. slideToggle()
+ 切换显示和隐藏
三个方法都是一样的参数
=> 方法名(时间, 运动曲线, 回调函数)
这三个方法名很好记啊 slide 在边框哪里是直线的意思 那么在这里 slideDown 就是 直线下 slideUp就是直线上 ..还有一个就是直线切换咯...无聊死了
和13的一樣啊 只不过这里是 上和下 13 是默认
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jqsourse.js"></script>
<style>
*{
margin:0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
input{
margin-top: 10px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input class="show" type="button" value="显示">
<input class="hide" type="button" value="隐藏">
<input class="toggle" type="button" value="切换">
<div></div>
<script>
$('.show').click(()=>{
$('div').slideDown(1000,'linear',()=>{
console.log("显示div");
})
});
$('.hide').click(()=>{
$('div').slideUp(1000,'linear',()=>{
console.log("隐藏div");
})
});
$('.toggle').click(()=>{
$('div').slideToggle(1000,'linear',()=>{
console.log("切换div");
})
});
</script>
</body>
</html>