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>