在 jQuery 中灾部，我們可以使用 <code>animate()</code> 方法來給元素添加自定義動(dòng)畫搪哪。
animate(properties, speed, easing, callback)
為元素添加自定義動(dòng)畫肠缨。
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| properties | Object | 必選叨恨。一個(gè)CSS屬性和值的對(duì)象，元素將根據(jù)這組對(duì)象里的描述發(fā)生相應(yīng)的變化茄螃。 |
| speed | String/Number | 可選。動(dòng)畫時(shí)長，預(yù)設(shè)值為 "slow"、"normal"（默認(rèn)值嬉挡，400）、"fast"汇恤，也可自定義動(dòng)畫時(shí)長庞钢，單位為毫秒（如：1000）。 |
| easing | String | 可選因谎。過渡動(dòng)畫的類型基括，預(yù)設(shè)值為 "linear"、"swing"（默認(rèn)值）财岔。 |
| callback | Function | 可選风皿。動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。 |
注意：在 animate() 中改變色彩是無效的匠璧。
操作單個(gè)屬性
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_動(dòng)畫01_操作單個(gè)屬性</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 的寬度(使用相對(duì)值)</button>
<script>
$(function () {
$("#btn1").click(function () {
$("#div1").animate({width: "600px"}, "slow");
});
// 可以使用定義相對(duì)值（該值相對(duì)于元素的當(dāng)前值）桐款，需要在值的前面加上 += 或 -=。
$("#btn2").click(function () {
$("#div2").animate({width: "+=600px"}, "slow");
});
});
</script>
</body>
</html>
效果演示：
操作單個(gè)屬性.gif
操作多個(gè)屬性
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_動(dòng)畫02_操作多個(gè)屬性</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>
效果演示：
操作多個(gè)屬性.gif
移動(dòng)位置
默認(rèn)情況下夷恍，所有元素都無法移動(dòng)魔眨，如需移動(dòng)元素的位置，需要把元素的 CSS position 屬性設(shè)置為 absolute酿雪、relative 或 fixed遏暴。
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_動(dòng)畫03_移動(dòng)位置</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">移動(dòng) div 的位置</button>
<script>
$(function () {
$("#btn1").click(function () {
$("#div1").animate({
left: "600px"
}, 2000);
});
});
</script>
</body>
</html>
效果演示：
移動(dòng)位置.gif
使用隊(duì)列
使用隊(duì)列，即編寫多個(gè) animate() 函數(shù)指黎，jQuery 會(huì)創(chuàng)建一個(gè)隊(duì)列朋凉，將這些 animate() 函數(shù)添加到隊(duì)列中，然后逐一執(zhí)行這些函數(shù)袋励。
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_動(dòng)畫04_使用隊(duì)列</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">移動(dòng) 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>
效果演示：
使用隊(duì)列.gif
