古詩詞大全網 - 成語解釋 - jquery animate 運動速度由慢逐漸變快怎麽實現?

jquery animate 運動速度由慢逐漸變快怎麽實現?

jquery.easing.js--animate--easing--參數

animate() 方法執行 CSS 屬性集的自定義動畫。

該方法通過CSS樣式將元素從壹個狀態改變為另壹個狀態。CSS屬性值是逐漸改變的,這樣就可以創建動畫效果。

只有數字值可創建動畫(比如 "margin:30px")。字符串值無法創建動畫(比如 "background-color:red")。

註釋:使用 "+=" 或 "-=" 來創建相對動畫(relative animations)。

語法 1

$(selector).animate(styles,speed,easing,callback)

參數描述

styles

必需。規定產生動畫效果的 CSS 樣式和值。

可能的 CSS 樣式值(提供實例):

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin

marginBottom

marginLeft

marginRight

marginTop

outlineWidth

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

width

maxHeight

maxWidth

minHeight

minWidth

font

fontSize

bottom

left

right

top

letterSpacing

wordSpacing

lineHeight

textIndent

註釋:CSS 樣式使用 DOM 名稱(比如 "fontSize")來設置,而非 CSS 名稱(比如 "font-size")。

speed

可選。規定動畫的速度。默認是 "normal"。

可能的值:

毫秒 (比如 1500)

"slow"

"normal"

"fast"

easing

可選。規定在不同的動畫點中設置動畫速度的 easing 函數。

內置的 easing 函數:

swing

linear

擴展插件中提供更多 easing 函數。

callback

可選。animate 函數執行完之後,要執行的函數。

如需學習更多有關 callback 的內容,請訪問我們的 jQuery Callback 這壹章。

語法 2

$(selector).animate(styles,options)

參數描述

styles必需。規定產生動畫效果的 CSS 樣式和值(同上)。

options

可選。規定動畫的額外選項。

可能的值:

speed - 設置動畫的速度

easing - 規定要使用的 easing 函數

callback - 規定動畫完成之後要執行的函數

step - 規定動畫的每壹步完成之後要執行的函數

queue - 布爾值。指示是否在效果隊列中放置動畫。如果為 false,則動畫將立即開始

specialEasing - 來自 styles 參數的壹個或多個 CSS 屬性的映射,以及它們的對應 easing 函數