jQuery animate() 方法

時間 2019-11-08

標籤 jquery animate 方法欄目 JQuery 简体版

原文原文鏈接

定義和用法

animate() 方法執行 CSS 屬性集的自定義動畫。

該方法經過 CSS 樣式將元素從一個狀態改變爲另外一個狀態。CSS屬性值是逐漸改變的，這樣就能夠建立動畫效果。

只有數字值可建立動畫（好比 "margin:30px"）。字符串值沒法建立動畫（好比 "background-color:red"）。

提示：請使用 "+=" 或 "-=" 來建立相對動畫。

語法

$(selector).animate({styles},speed,easing,callback)

參數

參數	必需的	描述
styles	是	規定產生動畫效果的一個或多個 CSS 屬性/值。注意：當與 animate() 方法一塊兒使用時，該屬性名稱必須是駝峯寫法：您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推。能夠應用動畫的屬性： backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 提示：顏色動畫不包含在覈心 jQuery 庫中。若是您想要應用動畫顏色，您須要從 jQuery.com 下載顏色動畫插件。
speed	否	規定動畫的速度。可能的值：毫秒 "slow" "fast"
easing	否	規定在動畫的不一樣點中元素的速度。默認值是 "swing"。可能的值： "swing" - 在開頭/結尾移動慢，在中間移動快 "linear" - 勻速移動提示：擴展插件中提供更多可用的 easing 函數。
callback	否	animate 函數執行完以後，要執行的函數。如需學習更多有關 callback 的內容，請訪問 jQuery Callback 。

實例

下例演示了animate()方法的簡單用法; 它將<div>元素向右移動，直到它達到250px的left屬性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歡迎來到蝴蝶教程</title>
//此版本是百度cdn 1.11.1，固然你能夠使用更高的版本，從2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
     $(document).ready(function () {
       $("button").click(function(){
          $("div").animate({left: '250px'});
       });
     });
</script>
</head>
<body>
          <button>開始動畫</button>    
          <p>默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。 
          若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p>
          <div style="background:#009688;height:100px;width:100px;position:absolute;"></div>      
</body>
</html>

jQuery animate() 方法

定義和用法

語法

參數

實例

相關知識