在 jQuery 中，我们可以使用 <code>animate()</code> 方法来给元素添加自定义动画。
animate(properties, speed, easing, callback)
为元素添加自定义动画。
| 参数 | 类型 | 描述 |
|---|---|---|
| properties | Object | 必选。一个CSS属性和值的对象，元素将根据这组对象里的描述发生相应的变化。 |
| speed | String/Number | 可选。动画时长，预设值为 "slow"、"normal"（默认值，400）、"fast"，也可自定义动画时长，单位为毫秒（如：1000）。 |
| easing | String | 可选。过渡动画的类型，预设值为 "linear"、"swing"（默认值）。 |
| callback | Function | 可选。动画完成时执行的函数。 |
注意：在 animate() 中改变色彩是无效的。
操作单个属性
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_动画01_操作单个属性</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: orangered;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btn1">改变 div 的宽度</button>
<div id="div2"></div>
<button id="btn2">改变 div 的宽度(使用相对值)</button>
<script>
$(function () {
$("#btn1").click(function () {
$("#div1").animate({width: "600px"}, "slow");
});
// 可以使用定义相对值（该值相对于元素的当前值），需要在值的前面加上 += 或 -=。
$("#btn2").click(function () {
$("#div2").animate({width: "+=600px"}, "slow");
});
});
</script>
</body>
</html>
效果演示：
操作单个属性.gif
操作多个属性
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_动画02_操作多个属性</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: orangered;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btn1">改变 div 的宽度&高度&透明度</button>
<script>
$(function () {
$("#btn1").click(function () {
$("#div1").animate({
width: "400px",
height: "400px",
opacity: 0.5
}, 3000);
});
});
</script>
</body>
</html>
效果演示：
操作多个属性.gif
移动位置
默认情况下，所有元素都无法移动，如需移动元素的位置，需要把元素的 CSS position 属性设置为 absolute、relative 或 fixed。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_动画03_移动位置</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: orangered;
position: relative;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btn1">移动 div 的位置</button>
<script>
$(function () {
$("#btn1").click(function () {
$("#div1").animate({
left: "600px"
}, 2000);
});
});
</script>
</body>
</html>
效果演示：
移动位置.gif
使用队列
使用队列，即编写多个 animate() 函数，jQuery 会创建一个队列，将这些 animate() 函数添加到队列中，然后逐一执行这些函数。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_动画04_使用队列</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: orangered;
position: relative;
}
</style>
</head>
<body>
<button id="btn1">移动 div 的位置</button>
<div id="div1"></div>
<script>
$(function () {
$("#btn1").click(function () {
var div = $("#div1");
div.animate({left: "35%"}, 1000);
div.animate({top:"100px"}, 1000);
div.animate({width: "400px", opacity: 0.5}, 1000);
div.animate({height: "400px", opacity: 1}, 1000);
div.animate({width: "100px", opacity: 0.5}, 1000);
div.animate({height: "100px", opacity: 1}, 1000);
div.animate({left: 0}, 1000);
div.animate({top:"0"}, 1000);
});
});
</script>
</body>
</html>
效果演示：
使用队列.gif
