HTML5學堂：animate是jQuery中很好用的一個方法，用於實現自定義動畫。對於animate方法是有不同的書寫方法的，今天我們就來說說animate平時不太常用的一些用法。
animate方法，能夠支持單位為數值（px、em、%）的CSS屬性，對於背景顏色的變化，animate是不支持的。但是我們有時也希望顏色能夠發生變化，此時，我們可以使用一個jQuery插件——jQuery.Color()。點擊此處可下載——jQuery.Color插件（訪問密碼：236d）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂 - jQuery animate</title>
<link rel="stylesheet" href="model/css/reset.css">
<script src="model/js/jquery-1.11.2.js"></script>
<script src="model/js/jquery.color.js"></script>
<style>
.btn {
height: 50px;
line-height: 50px;
font-size: 32px;
}
.wrap {
width: 400px;
height: 50px;
background: #39f;
color: #fff;
font-size: 32px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>點擊此處</div>
<div>HTML5學堂</div>
<script>
$(".btn").click(function(){
$(".wrap").animate({
"background-color" : "#999"
}, 1000)
});
</script>
</body>
</html>
jQuery的動畫屬性animate，除了能夠設置基本的數值之外，還可以設置相對的值。如果一個值提供了一個+=和 -=操作符號，那麼目標值 = 當前的值 + 或 - 給定的值。
代碼示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂 - jQuery animate</title>
<link rel="stylesheet" href="model/css/reset.css">
<script src="model/js/jquery-1.11.2.js"></script>
<style>
.btn {
height: 50px;
line-height: 50px;
font-size: 32px;
}
.wrap {
width: 400px;
height: 50px;
background: #39f;
color: #fff;
font-size: 32px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>點擊此處</div>
<div>HTML5學堂</div>
<script>
$(".btn").click(function(){
$(".wrap").animate({
"width" : "+=100px"
}, 1000)
});
</script>
</body>
</html>
jQuery的animate方法當中，對於屬性的屬性值設置，除了使用數值之外，還可以考慮「show」、「hide」、「toggle」。個人認為，這三種方法的優勢在於，對於需要隱藏或顯示此類的特效，能夠具備較好的擴展性。換句話說，對於一個元素，如果初始狀態是寬度400像素，希望能夠點擊之後寬度變化為0，再點擊某處寬度恢復。我們可以使用animate({"width" : "0px"});和animate({"width" : "400px"});來處理。但是，如果此時當前元素的初始寬度並不是400，而是600像素，那麼上面這段代碼就變得沒有「擴展性」了。雖然我們的確可以使用變量替換掉常量，再使用.css()方法獲取當前元素的樣式，但是也可以通過上面提到的「toggle」等特殊屬性值進行控制。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂 - jQuery animate</title>
<link rel="stylesheet" href="model/css/reset.css">
<script src="model/js/jquery-1.11.2.js"></script>
<style>
.btn {
height: 50px;
line-height: 50px;
font-size: 32px;
}
.wrap {
width: 400px;
height: 50px;
background: #39f;
color: #fff;
font-size: 32px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>點擊此處</div>
<div>HTML5學堂</div>
<script>
$(".btn").click(function(){
$(".wrap").animate({
"width" : "toggle"
}, 1000)
});
</script>
</body>
</html>
我們能夠使用animate實現多個動畫，但是如何讓一個一個的動畫有順序的執行呢？此處會使用到queue這個屬性設置。queue表示是否在效果隊列中放置動畫（即，是否形成一個鏈式動畫）。如果queue的值為false，則動畫立即開始，如果為queue的值設置為true，則表示是鏈式動畫。默認為true（鏈式）。
個人認為，並沒有太大的必要，因為默認的就是鏈式動畫，如果希望同時變化，完全可以寫在一個animate當中。
歡迎溝通交流~HTML5學堂