快捷導(dǎo)航

jQuery實(shí)現(xiàn)基本動(dòng)畫(huà)效果的方法詳解

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

這篇文章主要介紹了jQuery實(shí)現(xiàn)基本動(dòng)畫(huà)效果的方法,結(jié)合實(shí)例形式分析了jQuery animate()方法實(shí)現(xiàn)動(dòng)畫(huà)效果相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)基本動(dòng)畫(huà)效果的方法。分享給大家供大家參考，具體如下：

animate()方法用于創(chuàng)建自定義動(dòng)畫(huà)

語(yǔ)法：

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

params:必須定義形成動(dòng)畫(huà)的CSS屬性
speed:可選規(guī)定效果的時(shí)常：slow,fast或毫秒
callback:可選動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)名稱(chēng)。

jQuery `animate()`——操作多個(gè)屬性

默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無(wú)法移動(dòng)，如需對(duì)位置進(jìn)行操作，記得首先把元素的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>開(kāi)始動(dòng)畫(huà)</button>
<br />
<br />
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

運(yùn)行結(jié)果：

absolute是指絕對(duì)定位，即將對(duì)象從文檔流中拖出，使用left,right,top,bottom等屬性進(jìn)行絕對(duì)定位，而其層疊通過(guò)z-index屬性定義。此時(shí)對(duì)象不具有邊距，但仍有補(bǔ)白和邊框。

當(dāng)Position屬性值為absolute時(shí)對(duì)象從文檔流中抽取出來(lái)，原占有的位置被后面的對(duì)象頂替上來(lái)。

Top的值表示對(duì)象上邊框與瀏覽器窗口頂部的距離，bottom的值表示對(duì)象下邊框與瀏覽器窗口底部的距離，兩者同時(shí)存在時(shí)，只有Top起作用；如果兩者都未指定，則其頂端將于原文檔流位置一致，即垂直保持位置不變。

Left的值表示對(duì)象左邊框與瀏覽器窗口左邊的距離，right的值表示對(duì)象右邊框與瀏覽器窗口右邊的距離，兩者同時(shí)存在時(shí)，只有Left起作用，如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。

ralative是指相對(duì)定位，就是依據(jù)left,right,top,bottom等屬性在正常文檔中偏移位置。

當(dāng)Position屬性值為Relative時(shí)對(duì)象原來(lái)占有的位置保留，其后面的對(duì)象按原來(lái)文檔流仍然保持原來(lái)的位置。

Top的值表示對(duì)象相對(duì)原位置向下偏移的距離，bottom的值表示對(duì)象相對(duì)原位置向上偏移的距離，兩者同時(shí)存在時(shí)，只有Top起作用；

left的值表示對(duì)象相對(duì)原位置向右偏移的距離，right的值表示對(duì)象相對(duì)原位置向左偏移的距離，兩者同時(shí)存在時(shí)，只有l(wèi)eft起作用。

jQuery `animate()`——使用預(yù)定義的值

可以將屬性的動(dòng)畫(huà)值設(shè)置成"show"、"hide"或者"toggle"

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery `animate()`——使用隊(duì)列功能

jquery提供針對(duì)動(dòng)畫(huà)的隊(duì)列功能。

這意味著如果您在彼此之后編寫(xiě)多個(gè)animate()調(diào)用，jQuery會(huì)創(chuàng)建包含這些方法調(diào)用的"內(nèi)部"隊(duì)列。然后逐一運(yùn)行這些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>開(kāi)始</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

運(yùn)行結(jié)果：

eg：將<div>元素移到右邊，然后增加文本的字號(hà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({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>開(kāi)始</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">Tian</div>
</body>
</html>

運(yùn)行結(jié)果：