使用jQuery怎么實現(xiàn)基本動畫效果

發(fā)布時間：2021-05-20 15:58:32 來源：億速云閱讀：144 作者：Leah 欄目：web開發(fā)

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)使用jQuery怎么實現(xiàn)基本動畫效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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 >
</div>
</body>
</html>

運行結(jié)果：

使用jQuery怎么實現(xiàn)基本動畫效果

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 >
</div>
</body>
</html>

運行結(jié)果：

使用jQuery怎么實現(xiàn)基本動畫效果

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 >Tian</div>
</body>
</html>

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

上述就是小編為大家分享的使用jQuery怎么實現(xiàn)基本動畫效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

使用jQuery怎么實現(xiàn)基本動畫效果

jQuery animate()——操作多個屬性

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

jQuery animate()——使用隊列功能

jquery是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

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

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

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