快捷導(dǎo)航

jQuery中使用animate自定義動畫的方法

更新時間：2016年05月29日 14:48:11 作者：半醒半夢半浮塵

這篇文章主要介紹了jQuery中使用animate自定義動畫的方法的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

動畫 animate()

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

　　有些復(fù)雜的動畫通過之前學(xué)到的幾個動畫函數(shù)是不能夠?qū)崿F(xiàn)，這時候就是強大的animate方法了。

　　操作一個元素執(zhí)行3秒的淡入動畫，對比下一下2組動畫設(shè)置的區(qū)別。

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

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

語法：

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

2 .animate( properties, options )

　　.animate()方法允許我們在任意的數(shù)值的CSS屬性上創(chuàng)建動畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設(shè)置.css()方法的屬性鍵值對類似，除了屬性范圍做了更多限制。第二個參數(shù)開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了。

參數(shù)分解：

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

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

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

除了定義數(shù)值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏

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

如果提供一個以+= 或 -=開始的值，那么目標(biāo)值就是以這個屬性的當(dāng)前值加上或者減去給定的數(shù)字來計算的

.animate({ 
left: '+50px'
}, "slow");

duration：時間

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

jQuery庫中是默認(rèn)的時調(diào)用 swing。在一個恒定的速度進(jìn)行動畫，如果需要其他的動畫算法，請查找相關(guān)的插件

complete回調(diào)

動畫完成時執(zhí)行的函數(shù)，這個可以保證當(dāng)前動畫確定完成后發(fā)會觸發(fā)

　　02.animate() 方法來依次執(zhí)行多個動畫

　　animate在執(zhí)行動畫中，如果需要觀察動畫的一些執(zhí)行情況，或者在動畫進(jìn)行中的某一時刻進(jìn)行一些其他處理，我們可以通過animate的提供第二種設(shè)置語法，傳遞一個對象參數(shù)，可以拿到動畫執(zhí)行狀態(tài)一些通知。

.animate( properties, options )

options參數(shù)

duration - 設(shè)置動畫執(zhí)行的時間
easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動函數(shù)
step：規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
progress：每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)，就是一個進(jìn)度的概念
complete：動畫完成回調(diào)

如果多個元素執(zhí)行動畫，回調(diào)將在每個匹配的元素上執(zhí)行一次，不是作為整個動畫執(zhí)行一次

列出常用的方式

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

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

$(selector).animate({params},speed,[callback])

其中，params參數(shù)為制作動畫效果的CSS屬性名與值，speed參數(shù)為動畫的效果的速度，單位為毫秒，可選項callback參數(shù)為動畫完成時執(zhí)行的回調(diào)函數(shù)名。

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

<body>
<h>制作簡單的動畫效果</h>
<img src="images/.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$('img').animate({
width: 'px';
height:'px'
}, , function() {
$("#tip").html('執(zhí)行完成！');
});
})
</script>
</body>

在瀏覽器中顯示的效果：