jQuery 里面有三个基础动画
1. show()
+ 显示
2. hide()
+ 隐藏
3. toggle()
+ 切换, 本身显示就隐藏, 本身隐藏就显示(取反的意思啊)
上面三个方法操作的都是 ： display: none 和 block
而且 上面三个方法的语法都是一样的：
=> 方法名(运动时间, 运动曲线, 回调函数)
参数：
=> 运动时间: 多长时间运动结束（毫秒）
=> 运动曲线: 什么方式运动
=> 回调函数: 运动结束后触发此方法
例： 自己试一下啊 很简单的
<!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‘).show(1000,‘linear‘,()=>{ console.log("显示div"); }) }); $(‘.hide‘).click(()=>{ $(‘div‘).hide(1000,‘linear‘,()=>{ console.log("隐藏div"); }) }); $(‘.toggle‘).click(()=>{ $(‘div‘).toggle(1000,‘linear‘,()=>{ console.log("切换div"); }) }); </script> </body> </html>
css的运动 我偷得 啊哈哈
1、ease：（逐渐变慢）默认值
2、linear：（匀速）
3、ease-in：(加速)
4、ease-out：（减速）
5、ease-in-out：（加速然后减速）
6、cubic-bezier