Jquery|小白学习各种动画特效(含各种小测试用例)
本博文源于jQuery，旨在学习jquery中动画的一些操作。
animate()方法的基本使用
程序中，我们调用了animate()函数，并传入两个参数：
- 第1个参数是一个JSON对象，用来设置盒子要变化为什么样式，称为“动画的终点样式”
- 第2个参数是一个数字型值，用来设置动画的总时长，以毫秒为单位。
例子：将矩形变成圆形
$("#box").animate({
"left":800,
"top":300,
"width":100,
"height":100,
"border-radius":"50%"
},2000);
测试效果
完整测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#box").animate({
"left":800,
"top":300,
"width":100,
"height":100,
"border-radius":"50%"
},2000);
</script>
</body>
</html>
哪些属性可以参与动画
基本上我们常用到的都可以，除了一些
- 背景的属性不能参与animate()动画.比如：代码带有background的。background-color
- c3的transform属性，比如rotate()旋转,skew(斜切)等不能成为animate()的参数
不考虑兼容性那就需要用c3做动画，如果考虑兼容性那就直接jquery适合
动画的并发和排序
- 不同元素的animate()动画会同时进行
- 相同元素的animate()动画会排队进行
学习这些，来个例子体会就行了
不同元素的animate()动画会同时进行
例子：5个红色盒子同时向右移动
$("#box1").animate({"left":1000},1000);
$("#box2").animate({"left":1000},1000);
$("#box3").animate({"left":1000},1000);
$("#box4").animate({"left":1000},1000);
$("#box5").animate({"left":1000},1000);
测试效果
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<!-- <div class="box" id="box"></div> -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//不同元素的animate()动画会同时进行
$("#box1").animate({"left":1000},1000);
$("#box2").animate({"left":1000},1000);
$("#box3").animate({"left":1000},1000);
$("#box4").animate({"left":1000},1000);
$("#box5").animate({"left":1000},1000);
</script>
</body>
</html>
相同元素的animate()动画会排队进行
例子：一个蓝盒子做矩形运动
$("#box").animate({"left":1000},1000);
$("#box").animate({"top":400},1000);
$("#box").animate({"left":0},1000);
$("#box").animate({"top":0},1000);
测试效果
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- <div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div> -->
<div class="box" id="box"></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//同一个元素的多个animate()动画会排队进行
$("#box").animate({"left":1000},1000);
$("#box").animate({"top":400},1000);
$("#box").animate({"left":0},1000);
$("#box").animate({"top":0},1000);
</script>
</body>
</html>
测试：下面代码等价吗？
$("#box").animate({
"left":1000,
"top":400
},2000);
$("#box").animate({"left":1000},1000);
$("#box").animate({"top":400},1000);
答：
- 第一条同时进行，斜着运动
- 第二条语句排队进行，先右移动,然后向下移动
回调函数
animate第三个参数支持回调函数，回调函数就是指，当动画执行完毕之后执行的动作
例子：将灰色盒子向右移动后改变颜色
测试效果
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width:80px;
height: 80px;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<div class = "box"></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(".box").animate({"left":800},1000,function(){
$(this).css("background-color","green");
});
</script>
</body>
</html>
动画的停止
动画的停止函数stop()，里面有两个默认参数false
$(选择器).animate(是否清空后续动画队列,是否立即完成当前剩余动画)
两个都是false，意味着不清空后续动画序列，不完成当前剩余动画。
true true ：清空后续动画序列，完成当前剩余动画
来个例子测试一下
例子：设置四个按钮，测试盒子运动stop参数
测试效果
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
margin-top: 20px;
}
</style>
</head>
<body>
<button id="btn1">stop()</button>
<button id="btn2">stop(true)</button>
<button id="btn3">stop(true,true)</button>
<button id="btn4">stop(false,true)</button>
<div class="box" id="box"></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#box").animate({"left":1000},5000);
$("#box").animate({"top":400},5000);
$("#btn1").click(function(){
$("#box").stop();
});
$("#btn2").click(function(){
$("#box").stop(true);
});
$("#btn3").click(function(){
$("#box").stop(true,true);
});
$("#btn4").click(function(){
$("#box").stop(false,true);
});
</script>
</body>
</html>
第一个按钮false .false 按住之后不清空后续动画队列，并且不立即完成当前剩余动画。所以单击按钮1，虽然盒子会停止当前正在执行的从左到右运动的动画，但是没有清空动画队列，所以盒子会立即进行第二段动画
第二个按钮true false,意思是清空后续动画队列，并且不完成当前剩余动画，单击按钮2，不但会停止，后续也不执行了
第三个按钮 true true 不但会清空动画队列，而且还会立即完成当前动画。所以盒子直接跳到最右边
第四个按钮false true 不会清空动画队列，立即完成当前动画，也就是直接跳到最右边，然后继续完成后面队列动画
动画延迟
想让动画延缓执行，那就需要用到动画延迟
例如：下面的语句使盒子延迟2000毫秒后再进行动画
$(".box").delay(2000).animate({"left":1000},1000);
例子：广告小动画制作
这篇博文独立写延迟案例，效果非常炫酷，值得一看！
jQuery广告小动画制作(含测试源码)
防止动画积累
当一个正处于动画状态的时候，突然执行animate，不会立即响应，而是做完自己的动画才响应动画。，因此这就是动画积累了，解决这个方法需要用到stop(true),按照定义，请空后续动画队列，并且不完成当前剩余动画，美其名曰立即响应用户行为
例子：用按钮控制盒子左右移动
$("#btn1").click(function(){
$("#box").stop(true).animate({"left":800},1000);
});
$("#btn2").click(function(){
$("#box").stop(true).animate({"left":0},1000);
});
测试效果
测试代码
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
}
</style>
</head>
<body>
<button id="btn1">往左跑</button>
<button id="btn2">往右跑</button>
<div class="box" id="box"></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#btn1").click(function(){
$("#box").stop(true).animate({"left":800},1000);
});
$("#btn2").click(function(){
$("#box").stop(true).animate({"left":0},1000);
});
</script>
</body>
</html>
内置动画函数
jquery将一些常见的动画封装成独立的函数
slideUp()和slideDown()
这两个函数的效果时以滑动方式隐藏元素，里面的参数是毫秒，但也支持“fast”、“slow”、“normal”
| 描述词语 | 对应的时长(毫秒) |
|---|---|
| slow | 600 |
| normal | 400 |
| fast | 200 |
例子：将盒子隐藏与显示
测试效果
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 10px;
}
</style>
</head>
<body>
<button id="btn1">slideDown</button>
<button id="btn2">slideUp</button>
<div ></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#btn1").click(function(){
$("div").slideDown("fast");
});
$("#btn2").click(function(){
$("div").slideUp("fast");
});
</script>
</body>
</html>
fadeIn()和fadeOut()
这个函数跟上面的slideup和down类似，里面参数类型也跟它相似，一个案例体会一下
例子：制作盒子淡入淡出
$("button").click(function(){
$("div").fadeIn("slow");
});
测试效果
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 10px;
display: none;
}
</style>
</head>
<body>
<button>按我淡入</button>
<div ></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("button").click(function(){
$("div").fadeIn("slow");
});
</script>
</body>
</html>