溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery animate()中的CSS屬性集

發(fā)布時(shí)間：2021-09-04 09:29:36 來(lái)源：億速云 閱讀：131 作者：chen 欄目：web開(kāi)發(fā)

本篇內(nèi)容介紹了“jQuery animate()中的CSS屬性集”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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à)。

語(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，依此類推。

可以應(yīng)用動(dòng)畫(huà)的屬性：

  • backgroundPositionX

  • backgroundPositionY

  • borderWidth

  • borderBottomWidth

  • borderLeftWidth

  • borderRightWidth

  • borderTopWidth

  • borderSpacing

  • margin

  • marginBottom

  • marginLeft

  • marginRight

  • marginTop

  • outlineWidth

  • padding

  • paddingBottom

  • paddingLeft

  • paddingRight

  • paddingTop

  • height

  • width

  • maxHeight

  • maxWidth

  • minHeight

  • minWidth

  • fontSize

  • bottom

  • left

  • right

  • top

  • letterSpacing

  • wordSpacing

  • lineHeight

  • textIndent

提示：顏色動(dòng)畫(huà)不包含在核心 jQuery 庫(kù)中。如果您想要應(yīng)用動(dòng)畫(huà)顏色，您需要從 jQuery.com 下載  顏色動(dòng)畫(huà)插件。

speed否

規(guī)定動(dòng)畫(huà)的速度。

可能的值：

  • 毫秒

  • "slow"

  • "fast"

easing否

規(guī)定在動(dòng)畫(huà)的不同點(diǎn)中元素的速度。默認(rèn)值是 "swing"。

可能的值：

  • "swing" - 在開(kāi)頭/結(jié)尾移動(dòng)慢，在中間移動(dòng)快

  • "linear" - 勻速移動(dòng)

提示：擴(kuò)展插件中提供更多可用的 easing 函數(shù)。

callback否

animate 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。

如需學(xué)習(xí)更多有關(guān) callback 的內(nèi)容，請(qǐng)?jiān)L問(wèn)我們的  jQuery Callback 這一章。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq教程</title>
//此版本是百度cdn 1.11.1，當(dāng)然你可以使用更高的版本，從2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src=" 
<script>
   $(document).ready(function () {
     $("button").click(function(){
     $("div").animate({left: '250px'});});});
</script>
</head>
<body>
<button>開(kāi)始動(dòng)畫(huà)</button>
<p>默認(rèn)情況下，所有的 HTML 元素有一個(gè)靜態(tài)的位置，且是不可移動(dòng)的。如果需要改變?yōu)椋?
我們需要將元素的 position 屬性設(shè)置為 relative, fixed, 或 absolute!</p>
<div style="background:#009688;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

“jQuery animate()中的CSS屬性集”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手