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

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

語法：

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

params:必須 定義形成動畫的CSS屬性

speed:可選? 規定效果的時常：slow,fast或毫秒

callback:可選? 動畫完成后所執行的函數名稱。

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

默認情況下，所有HTML元素的位置都是靜態的，并且無法移動，如需對位置進行操作，記得首先把元素的CSS position 屬性設置為 relative、fixed或absolute。

$(document).ready(function(){

$("button").click(function(){

$("div").animate({

left:'250px',

height:'150px',

width:'150px'

});

});

});

開始動畫

運行結果：

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調用。

$(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");

});

});

開始

運行結果：

eg：將

元素移到右邊，然后增加文本的字號。

$(document).ready(function(){

$("button").click(function(){

var div=$("div");

div.animate({left:'100px'},"slow");

div.animate({fontSize:'3em'},"slow");

});

});

開始

Tian

運行結果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家jQuery程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html用jq设置动态效果,jQuery实现基本动画效果的方法详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。