.animate( properties [, duration ] [, easing ] [, complete ] )返回: jQuery
描述: 根據一組 CSS 屬性，執行自定義動畫。javascript
-
添加的版本: 1.0.animate( properties [, duration ] [, easing ] [, complete ] )
-
properties類型: PlainObject一個CSS屬性和值的對象,動畫將根據這組對象移動。
-
duration (默認:
400)一個字符串或者數字決定動畫將運行多久。（愚人碼頭注：默認值: "normal"， 三種預約速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如：1000) ） -
easing (默認:
swing)類型: String一個字符串，表示過渡使用哪一種緩動函數。（譯者注：jQuery自身提供"linear" 和 "swing"） -
complete類型: Function()在動畫完成時執行的函數。
-
-
添加的版本: 1.0.animate( properties, options )
-
properties類型: PlainObject一個CSS屬性和值的對象,動畫將根據這組對象移動。
-
options類型: PlainObject一組包含動畫選項的值的集合。 支持的選項:
-
duration (default:
400)一個字符串或者數字決定動畫將運行多久。（愚人碼頭注：默認值: "normal"， 三種預約速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如：1000) ） -
easing (default:
swing)Type: String一個字符串，表示過渡使用哪一種緩動函數。（愚人碼頭注：jQuery自身提供"linear" 和 "swing"，其餘效果可使用 jQuery Easing Plugin插件） -
queue (default:
true)一個布爾值，指示是否將動畫放置在效果隊列中。若是爲false時，將當即開始動畫。 從jQuery1.7開始，隊列選項也能夠接受一個字符串，在這種狀況下，在動畫被添加到由該字符串表示的隊列中。當一個自定義的隊列名稱被使用，動畫不會自動啓動;你必須調用.dequeue("queuename")來啓動它。 -
specialEasingType: PlainObject由此方法的第一個參數properties定義的一個或多個CSS屬性，及其相應的緩動函數組成的鍵值對map。( 1.4 新增)
-
step每一個動畫元素的每一個動畫屬性將調用的函數。這個函數爲修改Tween 對象提供了一個機會來改變設置中得屬性值。
-
progress每一步動畫完成後調用的一個函數，不管動畫屬性有多少，每一個動畫元素都執行單獨的函數。 (version added: 1.8)
-
completeType: Function()在動畫完成時執行的函數。
-
done在動畫完成時執行的函數。 (他的Promise對象狀態已完成). (version added: 1.8)
-
fail動畫失敗完成時執行的函數。(他的Promise對象狀態未完成)。 (version added: 1.8)
-
always在動畫完成或未完成狀況下中止時執行的函數。(他的Promise對象狀態已完成或未完成)。 (version added: 1.8)
-
-
.animate()方法容許咱們在任意的數值的CSS屬性上建立動畫。惟一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設置.css()方法的屬性鍵值對相似，除了屬性範圍作了更多限制。css
Animation Properties and Values(動畫屬性和值)
全部用於動畫的屬性必須是數字的，除非另有說明；這些屬性若是不是數字的將不能使用基本的jQuery功能。（例如，width, height或者left能夠執行動畫，可是background-color不能，除非使用jQuery.Color()插件。）屬性值的單位像素（px）,除非另有說明。單位em 和 %須要指定使用。html
除了樣式屬性， 一些非樣式的屬性，如scrollTop 和 scrollLeft，以及自定義屬性，也可應用於動畫。java
CSS簡寫屬性（例如font, background, border）沒有獲得充分的支持。例如， 若是你想邊框寬度作動畫呈現，至少邊框樣式和邊框寬度必須預先設定不爲"auto" 。或者，若是你想字體大小作動畫， 你可使用fontSize的或至關於CSS的 'font-size' ，而不是簡單的'font'。jquery
除了定義數值，每一個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式容許定製隱藏和顯示動畫用來控制元素的顯示或隱藏。爲了使用jQuery內置的切換狀態跟蹤，'toggle'關鍵字必須在動畫開始前給定屬性值。（愚人碼頭注：jquery中有兩個.toggle()方法，一個是顯示或隱藏匹配元素。另外一個是綁定兩個或多個處理程序綁定到匹配的元素，用來執行在交替的點擊。哪個被調用取決於傳遞的參數的設置。因此這裏'toggle'關鍵字必須在動畫開始前給定屬性值，以確認調用哪一個'toggle'方法。）git
動畫屬性也能夠是一個相對值。若是提供一個以+= 或 -=開始的值，那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的。github
注意: 不一樣於動畫的簡便方法，好比
.slideDown()和.fadeIn(),.animate()方法不會影響隱藏元素的可見性部分的效果。例如，給定$('someElement').hide().animate({height:'20px'}, 500)，動畫將執行，但該元素將保持隱藏。api
Duration（持續時間）
持續時間是以毫秒爲單位的；值越大表示動畫執行的越慢，不是越快。還能夠提供'fast' 和 'slow'字符串，分別表示持續時間爲200 和 600毫秒。數組
Complete Function（完成函數）
若是提供complete回調函數將在動畫完成後被執行一次。這對於按順序執行一系列不一樣動畫時，特別有用。這個回調函數不設置任何參數，可是this會被傳遞到正在執行動畫的DOM元素上，若是多個元素一塊兒作動畫效果，值得注意的是這個回調函數在每一個匹配元素上執行一次，不是這個動畫做爲一個總體。緩存
Basic Usage（基本用法）
咱們能夠爲任何元素作動畫，好比這樣的一個簡單圖片：
|
1
2
3
4
5
|
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;" />
|
同時對透明度，左偏移值和高度應用動畫：
|
1
2
3
4
5
6
7
8
9
|
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
|
注意咱們這裏給定了toggle做爲height屬性的目標值。因爲這個圖片開始是可見的，這個動畫將收縮高度至0隱藏這個圖片。第二次點擊的時候將相反的轉變：
這個圖片的opacity已是其目標值了，因此這個屬性在第二次點擊的時候不會有動畫效果。因爲咱們給定了left目標值做爲相對值，在第二次動畫中圖片將向右移動得更遠。
若是元素的定位屬性是靜態的，即 position樣式屬性是static默認值，那麼他們的定位屬性（top, right, bottom, left)沒有明顯的效果。
注意: jQuery UI項目擴展了
.animate()方法，容許一些非數值的樣式，好比顏色，應用動畫。該項目還包括經過CSS classes來指定動畫的機制而不是單獨的屬性。
注意: 若是試圖將元素高度或寬度動畫至 0px，元素的內容是可見的，可能在動畫中溢出。經過固定原始元素的尺寸，隱藏內容解決。這樣能夠確保動畫平穩運行。一個clearfix 能夠用來自動修復您的主要元素的尺寸，而無需手動設置。
Step Function
第二個版本的.animate()提供了一個step選項- 每步動畫執行後調用的回調函數。啓用自定義動畫類型或改變正在執行的動畫，此功能是很是有用。它接受兩個參數（now 和 fx），this是當前正在執行動畫的DOM元素集合。
now: 每一步動畫屬性的數字值fx:jQuery.fx原型對象的一個引用，其中包含了多項屬性，好比elem表示前正在執行動畫的元素，start和end分別爲動畫屬性的第一個和最後一個的值，prop爲進行中的動畫屬性。
須要注意的是step函數被每一個動畫元素的每一個動畫屬性調用。例如，給定兩個列表項，step函數會被激發四次：
|
1
2
3
4
5
6
7
8
9
10
|
$('li').animate({
opacity: .5,
height: '50%'
},
{
step: function(now, fx) {
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
$('body').append('<div>' + data + '</div>');
}
});
|
Easing（緩動）
.animate()還有一個參數是一個字符串命名的使用緩動函數。一個緩動函數指定用於動畫進行中在不一樣點位的速度。 在jQuery庫中是默認的時調用 swing。在一個恆定的速度進行動畫，請調用 linear. 更多的緩動函數要使用的插件，最顯着的是jQuery UI suite（譯者注：或jQuery Easing Plugin插件）。
Per-property Easing
從jQuery 1.4 版本開始，咱們能設置per-property 緩存函數訪問一個單獨的.animate()。在.animate()的第一個版本中，每一個屬性能獲取一個數組做爲他的值：數組的第一個成員是CSS屬性，第二成員緩衝函數。若是爲某個屬性指定的緩衝函數還沒有被定義，那麼將會使用.animate() 方法的 easing 參數來代替。若是 easing 參數也未被定義，那麼將會使用默認的緩衝函數 swing。
例如, 咱們能夠同時的使用swing緩衝函數來作width 和 height動畫，而且用linear緩衝函數來作opacity動畫：
|
1
2
3
4
5
6
7
8
9
|
$('#clickme').click(function() {
$('#book').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 5000, 'linear', function() {
$(this).after('<div>Animation complete.</div>');
});
});
|
在.animate()的第二個版本中，選項對象能包含specialEasing屬性，該屬性自己是一組CSS屬性與相應的緩衝函數。例如，咱們能夠同時的使用linear緩衝函數來作width動畫，而且用easeOutBounce緩衝函數來作height動畫：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$('#clickme').click(function() {
$('#book').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
});
|
如前所述,easeOutBounce 函數是一個極其必要的插件。
Additional Notes:（其餘注意事項：）
- 全部的jQuery效果，包括
.animate(),能使用jQuery.fx.off = true來全局性關閉。更多信息請查看jQuery.fx.off.
例子:
Example: 點擊按鈕，根據指定的一系列屬性，在 div 上應用動畫。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
<script>
/* Using multiple unit types within one animation. */
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>
</body>
</html>
|
Demo:
Example: 對 div 應用動畫，在 left 屬性上使用相對值。執行動畫屢次，查看相對值的累加效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
</script>
</body>
</html>
|
Demo:
Example: 第一個按鈕要執行的動畫中，使用了 queue: false 選項，該動畫使元素的寬度擴大到了總寬 90%,而且 文字大小也變大了。一旦字體大小改變完了，邊框的動畫就會開始。 第二個按鈕要執行的動畫中，包含了一系列動畫，當前一個動畫完成時，後一個動畫就會開始。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>
<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>
$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function(){
$( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function(){
$( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
</script>
</body>
</html>
|
Demo:
Example: 對第一個 div 的 left 屬性應用動畫，在動畫執行的過程當中，在 step 函數中改變其他 div 的 left 屬性。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<script>
$( "#go" ).click(function(){
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>
</body>
</html>
|
Demo:
Example: 對全部段落的高和透明度使用 toggle 動畫，用時 600 毫秒。
|
1
2
3
|
$( "p" ).animate({
height: "toggle", opacity: "toggle"
}, "slow" );
|
Example: 對全部段落應用動畫，使其 left 屬性變爲 50，透明度變爲 1（即，不透明，可見），用時 500 毫秒。
|
1
2
3
|
$( "p" ).animate({
left: 50, opacity: 1
}, 500 );
|
Example: Animate the left and opacity style properties of all paragraphs; run the animation outside the queue, so that it will automatically start without waiting for its turn.
|
1
2
3
|
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
|
Example: 一個使用 'easing' 緩衝函數的例子，只要當你提供的插件中包含 easing 函數便可。注意，如下代碼只能在處於隱藏的元素上纔會看出效果。
|
1
2
3
|
$( "p" ).animate({
opacity: "show"
}, "slow", "easein" );
|
Example: 對全部段落的高和透明度使用 toggle 動畫，用時 600 毫秒。
|
1
2
3
|
$( "p" ).animate({
height: "toggle", opacity: "toggle"
}, { duration: "slow" });
|
Example: 一個使用 'easing' 緩衝函數的例子，只要當你提供的插件中包含 easing 函數便可。
|
1
2
3
|
$( "p" ).animate({
opacity: "show"
}, { duration: "slow", easing: "easein" });
|
Example: 一個使用回調函數的例子。第一個參數是一個 CSS 屬性數組，第二個參數表示動畫耗時 1000 毫秒，第三個參數說明使用的是 easing 緩衝效果, 第四個參數是一個匿名的回調函數。
|
1
2
3
4
5
|
$( "p" ).animate({
height: 200, width: 400, opacity: 0.5
}, 1000, "linear", function() {
alert("all done");
});
|