當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 效果 - 动画

發(fā)布時間：2024/9/5 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery 效果 - 动画小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

jQuery animate() 方法允許您創(chuàng)建自定義的動畫。

jQuery 動畫 - animate() 方法

jQuery animate() 方法用于創(chuàng)建自定義動畫。

語法：

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

必需的 params 參數(shù)定義形成動畫的 CSS 屬性。

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。

下面的例子演示 animate() 方法的簡單應(yīng)用；它把 <div> 元素移動到左邊，直到 left 屬性等于 250 像素為止：

實例

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("button").click(function(){ 9 $("div").animate({left:'250px'}); 10 }); 11 }); 12 </script> 13 </head> 14 15 <body> 16 <button>開始動畫</button> 17 <p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p> 18 <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> 19 </div> 20 21 </body> 22 </html> View Code

查看結(jié)果:

移動后位置：

提示：默認地，所有 HTML 元素都有一個靜態(tài)位置，且無法移動。

如需對位置進行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute！

jQuery animate() - 操作多個屬性

請注意，生成動畫的過程中可同時使用多個屬性：

實例

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("button").click(function(){ 9 $("div").animate({ 10 left:'250px', 11 opacity:'0.5', 12 height:'150px', 13 width:'150px' 14 }); 15 }); 16 }); 17 </script> 18 </head> 19 20 <body> 21 22 <button>開始動畫</button> 23 <p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p> 24 <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> 25 </div> 26 27 </body> 28 </html> View Code

查看結(jié)果:

提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！

不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同時，色彩動畫并不包含在核心 jQuery 庫中。

如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。

jQuery animate() - 使用相對值

也可以定義相對值（該值相對于元素的當前值）。需要在值的前面加上 += 或 -=：

實例

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 $("div").animate({ 9 left:'250px', 10 height:'+=150px', 11 width:'+=150px' 12 }); 13 }); 14 }); 15 </script> 16 </head> 17 18 <body> 19 20 <button>開始動畫</button> 21 <p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p> 22 <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> 23 </div> 24 25 </body> 26 </html> View Code

查看結(jié)果:

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

您甚至可以把屬性的動畫值設(shè)置為 "show"、"hide" 或 "toggle"：

實例

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 $("div").animate({ 9 height:'toggle' 10 }); 11 }); 12 }); 13 </script> 14 </head> 15 16 <body> 17 18 <button>開始動畫</button> 19 <p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p> 20 <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> 21 </div> 22 23 </body> 24 </html> View Code

查看結(jié)果:

點擊之后：消失

再次點擊：出現(xiàn)

、

jQuery animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。

這意味著如果您在彼此之后編寫多個 animate() 調(diào)用，jQuery 會創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊列。然后逐一運行這些 animate 調(diào)用。

實例 1

隱藏，如果您希望在彼此之后執(zhí)行不同的動畫，那么我們要利用隊列功能：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 var div=$("div"); 9 div.animate({height:'300px',opacity:'0.4'},"slow"); 10 div.animate({width:'300px',opacity:'0.8'},"slow"); 11 div.animate({height:'100px',opacity:'0.4'},"slow"); 12 div.animate({width:'100px',opacity:'0.8'},"slow"); 13 }); 14 }); 15 </script> 16 </head> 17 18 <body> 19 20 <button>開始動畫</button> 21 <p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p> 22 <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> 23 </div> 24 25 </body> 26 </html> View Code

查看結(jié)果:

默認狀態(tài)：

動畫效果變成300px*300px：

恢復(fù)原狀：

實例 2

下面的例子把 <div> 元素移動到右邊，然后增加文本的字號：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 var div=$("div"); 9 div.animate({left:'100px'},"slow"); 10 div.animate({fontSize:'3em'},"slow"); 11 }); 12 }); 13 </script> 14 </head> 15 16 <body> 17 18 <button>開始動畫</button> 19 <p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p> 20 <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> 21 22 </body> 23 </html> View Code

查看結(jié)果:

默認狀態(tài)：

點擊之后：

轉(zhuǎn)載于:https://www.cnblogs.com/sihuiming/p/5336646.html

總結(jié)

以上是生活随笔為你收集整理的jQuery 效果 - 动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。