首頁 > 文章 > web前端 > jQuery中使用animate自訂動畫的方法

jQuery中使用animate自訂動畫的方法

高洛峰原創: 2016-12-28 09:18:061299瀏覽

動畫 animate()

　　01.animate()方法的簡單使用

　　有些複雜的動畫透過之前學到的幾個動畫函數是不能夠實現，這時候就是強大的animate方法了。

　　操作一個元素執行3秒的淡入動畫，對比下一下2組動畫設定的區別。

$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)

　　顯而易見，animate方法更加靈活了，可以精確的控制樣式屬性從而執行動畫。

語法：

1 .animate( properties [, duration ] [, easing ] [, complete ] )

2 .animate( properties, options )

『)允許我們在」SSS.屬性上建立動畫。 2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設定.css()方法的屬性鍵值對類似，除了屬性範圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合併成一個物件傳遞了。

參數分解：

properties：一個或多個css屬性的鍵值對所構成的Object物件。要特別注意所有用於動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。例如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。 background-color很明顯不可以，因為參數是red或GBG這樣的值，非常用插件，否則正常情況下是不能只能動畫效果的。請注意，CSS 樣式使用 DOM 名稱（例如 "fontSize"）來設置，而非 CSS 名稱（例如 "font-size"）。

　　特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用

.animate({
left: ,
width: &#39;px&#39;
opacity: &#39;show&#39;,
fontSize: "em",
}, );

除了定義數值，每個屬性能使用'show', 'hide', 和 'toggle'。這些捷徑允許自訂隱藏和顯示動畫用來控制元素的顯示或隱藏

.animate({
width: "toggle"
});

如果提供一個以+= 或-=開始的值，那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

.animate({
left: &#39;+50px&#39;
}, "slow");

duration：時間

動畫執行的時間，持續時間是以毫秒為單位的；值越大表示動畫執行的越慢，不是越快。也可以提供'fast' 和 'slow'字串，分別表示持續時間為200 和 600毫秒。
easing動畫運動的演算法：

jQuery函式庫中是預設的時呼叫 swing。在一個恆定的速度進行動畫，如果需要其他的動畫演算法，請尋找相關的插件

complete回調

動畫完成時執行的函數，這個可以保證當前動畫確定完成後發會觸發

　　02. animate() 方法來依序執行多個動畫

　　animate在執行動畫中，如果需要觀察動畫的一些執行情況，或者在動畫進行中的某一時刻進行一些其他處理，我們可以透過animate的提供第二種設定語法，傳遞一個物件參數，可以拿到動畫執行狀態一些通知。

.animate( properties, options )

options參數

duration - 設定動畫執行的時間
easing - 規定要使用的easing 函數，過渡使用哪種緩動函數

step：規定每個動畫的每一步都規定每個動畫的每一步完成之後要執行的函數

progress：每一次動畫呼叫的時候會執行這個回調，就是一個進度的概念

complete：動畫完成回呼

如果多個元素執行動畫，回呼將在每個匹配的元素上執行一次，不是作為整個動畫執行一次

列出常用的方式

$(&#39;#elem&#39;).animate({
width: &#39;toggle&#39;,
height: &#39;toggle&#39;
}, {
duration: ,
specialEasing: {
width: &#39;linear&#39;,
height: &#39;easeOutBounce&#39;
},
complete: function() {
$(this).after(&#39;<div>Animation complete.</div>&#39;);
}
});

調用animate()方法可以創建自定義動畫效果，它的調用格式為：

$ },speed,[callback])

其中，params參數為製作動畫效果的CSS屬性名與值，speed參數為動畫的效果的速度，單位為毫秒，可選項callback參數為動畫完成時執行的回調函數名。

例如，調用animate()方法以由小到大的動畫效果顯示圖片，如下圖所示：

<body>
<h>制作简单的动画效果</h>
<img src="images/.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$(&#39;img&#39;).animate({
width: &#39;px&#39;;
height:&#39;px&#39;
}, , function() {
$("#tip").html(&#39;执行完成！&#39;);
});
})
</script>
</body>

jQuery中使用animate自訂動畫的方法在瀏覽器中顯示的效果：

圖片

出，呼叫animate()方法，以漸漸放大的動畫效果顯示圖片元素，當動畫執行完成後，透過回呼函數在頁面的

元素中顯示「執行完成!」的字樣。 🎜更多jQuery中使用animate自訂動畫的方法相關文章請關注PHP中文網！ 🎜

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery animate easing使用方法圖文詳解下一篇：jQuery animate easing使用方法圖文詳解

看更多