站長(zhǎng)資訊網(wǎng)在上一篇《如何通過(guò)jQuery給一個(gè)元素添加單擊和雙擊事件》中給大家介紹jQuery給一個(gè)元素添加單擊和雙擊事件的方法，有需要的朋友可以學(xué)習(xí)了解一下~
本文的主要內(nèi)容則是給大家介紹如何用 jQuery 為段落元素設(shè)置動(dòng)畫(huà)。
那么在本文中，我們將實(shí)現(xiàn)單擊一個(gè)按鈕來(lái)使用 jQuery 為段落元素設(shè)置動(dòng)畫(huà)，并且主要使用 animate() 方法來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。animate() 方法用于更改具有 CSS 樣式的元素的狀態(tài)。此方法還可用于更改 CSS 屬性以創(chuàng)建所選元素的動(dòng)畫(huà)效果。
下面我們直接上代碼：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js"></script> <script> $(document).ready(function () { $("button").click(function () { $("#GFG").animate({ opacity: 0.5, fontSize: "3em", }, 1000); }); }); </script> </head> <body style="text-align: center;"> <h1 style="color: #ff311f;"> PHP中文網(wǎng) </h1> <h3> 如何用jQuery為段落元素設(shè)置動(dòng)畫(huà)？ </h3> <p id="GFG"> PHP中文網(wǎng)是你最佳的學(xué)習(xí)平臺(tái)！ </p> <button>點(diǎn)擊這里！</button> </body> </html>
效果如下：
這里需要大家掌握的就是animate()方法：
animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫(huà)。該方法通過(guò) CSS 樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫(huà)效果。只有數(shù)字值可創(chuàng)建動(dòng)畫(huà)（比如 "margin:30px"）。字符串值無(wú)法創(chuàng)建動(dòng)畫(huà)（比如 "background-color:red"）。
→注：請(qǐng)使用 "+=" 或 "-=" 來(lái)創(chuàng)建相對(duì)動(dòng)畫(huà)。
animate()的語(yǔ)法如下：
(selector).animate({styles},speed,easing,callback)
參數(shù)styles是必需的：規(guī)定產(chǎn)生動(dòng)畫(huà)效果的一個(gè)或多個(gè) CSS 屬性/值。
注意：當(dāng)與 animate() 方法一起使用時(shí)，該屬性名稱必須是駝峰寫(xiě)法： 您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推。
參數(shù)speed是可選的：規(guī)定動(dòng)畫(huà)的速度。
可能的值：
-
毫秒
-
"slow"
-
"fast"
參數(shù)easing是可選的：規(guī)定在動(dòng)畫(huà)的不同點(diǎn)中元素的速度。默認(rèn)值是 "swing"。
可能的值：
-
"swing" – 在開(kāi)頭/結(jié)尾移動(dòng)慢，在中間移動(dòng)快
-
"linear" – 勻速移動(dòng)
提示：擴(kuò)展插件中提供
