jQuery animate()

admin發表於2017-02-17
jQuery

此方法用於自定義動畫效果。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.animate(properties [, duration ] [, easing ] [, complete ])

引數解析:

（1）.properties:一個包含CSS屬性/屬性值對的物件。

（2）.duration:規定動畫持續時間，預設值是400毫秒；值可以是三種預定的值（"slow", "normal", 或 "fast）或表示動畫時長的毫秒數值，例如1000。

（3）.easing：一個字串，表示過渡使用哪種緩動函式，預設值是"swing"。jQuery自身提供"linear"和"swing"，其他效果可以使用jQuery Easing Plugin外掛。

（4）.complete:可選，在動畫完成時執行的函式。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.animate(properties, options)

引數解析:

options:一組包含動畫選項的值的集合。 

支援的選項:

（1）.duration:規定動畫持續時間，預設值是400毫秒；值可以是三種預定的值（"slow", "normal", 或 "fast）或表示動畫時長的毫秒數值(如：1000)。

（2）.easing：一個字串，表示過渡使用哪種緩動函式，預設值是"swing"。jQuery自身提供"linear"和"swing"，其他效果可以使用jQuery Easing Plugin外掛。

（3）.queue:布林值，規定是否將動畫放置在效果佇列中，預設為true；如果為false時，將立即開始動畫。 從jQuery1.7開始，佇列選項也可以接受一個字串，在這種情況下，在動畫被新增到由該字串表示的佇列中。當一個自定義的佇列名稱被使用，動畫不會自動啟動;你必須呼叫dequeue("queuename")來啟動它。

（4）.specialEasing:一組一個或多個通過相應的引數和相對簡單函式定義的CSS屬性(jQuery1.4新增)。

（5）.step:每個動畫元素的每個動畫屬性將呼叫的函式。

（6）.progress:每一步動畫完成後呼叫的一個函式，無論動畫屬性有多少，每個動畫元素都執行單獨的函式(jQuery1.8新增)。

（7）.complete:在動畫完成時執行的函式。

（8）.done:在動畫完成時執行的函式(Promise物件狀態已完成)(jQuery1.8新增)。

（9）.fail:動畫失敗完成時執行的函式。(Promise物件狀態未完成)(jQuery1.8新增)。

（10）.always:動畫完成或未完成情況下停止時執行的函式(Promise物件狀態已完成或未完成)(jQuery1.8新增)。

jQuery1.0版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>animate()函式-螞蟻部落</title>
<style type="text/css">
.ant{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function () {
    $(".ant").animate({
      width: "1000px",
      height:"300px"
    }, 1000)
  })
})
</script> 
</head>
<body>
<div class="ant"></div>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

通過動畫效果設定元素的長度和寬度。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.first{
  width:150px;
  height:150px;
  border:1px solid blue;
}
.second{
  width:150px;
  height:150px;
  border:1px solid blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#btn1").click(function(){
    $(".first").animate({
      width: "1000px"
    }, {
      queue: true,
      duration: 1000,
      complete: function a() {
        alert("寬度設定完成")
      }
   })
    .animate({
      fontSize: '7em'
    }, 1000)
    .animate({
      borderWidth: 10
    }, 1000);
  });
  $("#btn2").click(function(){
    $(".second").animate({
      width: "1000px"
    }, {
      queue: false,
      duration: 1000,
      complete: function a() {
        alert("寬度設定完成")
      }
   })
    .animate( {fontSize:'7em'} , 1000 )
    .animate( {borderWidth:10}, 1000);
  });
});
</script> 
</head>
<body>
  <div class="first">歡迎來到螞蟻部落</div>
  <div class="second">歡迎來到螞蟻部落</div>
  <button id="btn1">執行第一個動畫</button>
  <button id="btn2">執行第二個動畫</button>
</body>
</html>

相關文章