jQuery實現基本動畫效果的方法詳解

2019-11-19 13:01:08

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現基本動畫效果的方法。分享給大家供大家參考，具體如下：

animate()方法用于創建自定義動畫

語法：

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

params:必須定義形成動畫的CSS屬性
speed:可選規定效果的時常：slow,fast或毫秒
callback:可選動畫完成后所執行的函數名稱。

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

默認情況下，所有HTML元素的位置都是靜態的，并且無法移動，如需對位置進行操作，記得首先把元素的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>

運行結果：

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

當Position屬性值為absolute時對象從文檔流中抽取出來，原占有的位置被后面的對象頂替上來。

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

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

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

當Position屬性值為Relative時對象原來占有的位置保留，其后面的對象按原來文檔流仍然保持原來的位置。

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

left的值表示對象相對原位置向右偏移的距離，right的值表示對象相對原位置向左偏移的距離，兩者同時存在時，只有left起作用。

jQuery `animate()`――使用預定義的值

可以將屬性的動畫值設置成"show"、"hide"或者"toggle"

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

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

jquery提供針對動畫的隊列功能。

這意味著如果您在彼此之后編寫多個animate()調用，jQuery會創建包含這些方法調用的"內部"隊列。然后逐一運行這些animate調用。

<!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>

運行結果：

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>

運行結果：