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
本文来自博客园，作者：咸瑜，转载请注明原文链接：javascript:void(0)p/14814935.html
