jQuery實現(xiàn)基本動畫效果的方法詳解
本文實例講述了jQuery實現(xiàn)基本動畫效果的方法。分享給大家供大家參考，具體如下：
animate()方法用于創(chuàng)建自定義動畫
語法：
$(selector).animate({params},speed,callback);
- params:必須 定義形成動畫的CSS屬性
- speed:可選 規(guī)定效果的時常：slow,fast或毫秒
- callback:可選 動畫完成后所執(zhí)行的函數(shù)名稱。
jQuery animate()——操作多個屬性
默認情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動，如需對位置進行操作，記得首先把元素的CSS position 屬性設置為 relative、fixed或absolute。
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<br />
<br />
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
運行結(jié)果：
absolute是指絕對定位，即將對象從文檔流中拖出，使用left,right,top,bottom等屬性進行絕對定位，而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框。
當Position屬性值為absolute時對象從文檔流中抽取出來，原占有的位置被后面的對象頂替上來。
Top的值表示對象上邊框與瀏覽器窗口頂部的距離，bottom的值表示對象下邊框與瀏覽器窗口底部的距離，兩者同時存在時，只有Top起作用；如果兩者都未指定，則其頂端將于原文檔流位置一致，即垂直保持位置不變。
Left的值表示對象左邊框與瀏覽器窗口左邊的距離，right的值表示對象右邊框與瀏覽器窗口右邊的距離，兩者同時存在時，只有Left起作用，如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。
ralative是指相對定位，就是依據(jù)left,right,top,bottom等屬性在正常文檔中偏移位置。
當Position屬性值為Relative時對象原來占有的位置保留，其后面的對象按原來文檔流仍然保持原來的位置。
Top的值表示對象相對原位置向下偏移的距離，bottom的值表示對象相對原位置向上偏移的距離，兩者同時存在時，只有Top起作用；
left的值表示對象相對原位置向右偏移的距離，right的值表示對象相對原位置向左偏移的距離，兩者同時存在時，只有l(wèi)eft起作用。
jQuery animate()——使用預定義的值
可以將屬性的動畫值設置成"show"、"hide"或者"toggle"
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate()——使用隊列功能
jquery提供針對動畫的隊列功能。
這意味著如果您在彼此之后編寫多個animate()調(diào)用，jQuery會創(chuàng)建包含這些方法調(diào)用的"內(nèi)部"隊列。然后逐一運行這些animate調(diào)用。
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>開始</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
運行結(jié)果：
eg：將<div>元素移到右邊，然后增加文本的字號。
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>開始</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">Tian</div>
</body>
</html>
運行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于jQuery相關內(nèi)容還可查看本站專題：《jQuery動畫與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
下面小編就為大家?guī)硪黄獪\談jquery拼接字符串效率比較高的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
jQuery獲取當前元素的索引值還是很方便的，比如一大堆的li，當鼠標移上去的時候，你知道這個li是眾多l(xiāng)i中的第幾個嗎？2009-05-05
jQueryeasyui 中如何使用datetimebox 取兩個日期間相隔的天數(shù)
這篇文章主要介紹了jQueryeasyui 中使用datetimebox 取兩個日期間相隔的天數(shù)，需要的朋友參考下吧2017-06-06
對博客系統(tǒng)已經(jīng)做到了博客評論模塊部分了，對單篇博文進行靜態(tài)化的同時對博文的評論部分采取AJAX的方式去讀取。2009-11-11
這篇文章主要介紹了原生js和jQuery實現(xiàn)淡入淡出輪播效果，介紹到了jQuery實現(xiàn)淡入淡出輪播效果的基本原理，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要為大家詳細介紹了JQuery ztree異步加載實例，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章介紹了Jquery同輩元素選中/未選中效果的實例代碼，有需要的朋友可以參考一下2013-08-08
jQuery validate+artdialog+jquery form實現(xiàn)彈出表單思路詳解
在項目需求中有這樣一功能：在頁面彈出一個form表單，ajax無刷新提交表單，表單需通過驗證。下面小編給大家介紹通過jQuery validate+artdialog+jquery form實現(xiàn)彈出表單思路詳解，需要的朋友參考下吧2016-04-04
下面小編就為大家?guī)硪黄猨query設置css樣式的多種方法(總結(jié))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
jquery ui 實現(xiàn) tab標簽功能示例【測試可用】
這篇文章主要介紹了jquery ui 實現(xiàn) tab標簽功能,結(jié)合完整實例形式分析了jquery ui 實現(xiàn) tab標簽切換功能的相關操作技巧,需要的朋友可以參考下2019-07-07