快捷導航

jQuery實現(xiàn)基本動畫效果的方法詳解

更新時間：2018年09月06日 08:40:16 作者：furway

這篇文章主要介紹了jQuery實現(xiàn)基本動畫效果的方法,結(jié)合實例形式分析了jQuery animate()方法實現(xiàn)動畫效果相關(guā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 屬性設(shè)置為 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()`——使用預(yù)定義的值

可以將屬性的動畫值設(shè)置成"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é)果：