jQuery效果-animate()方法
例項
改變 “div” 元素的高度:
$(“.btn1”).click(function(){
$(“#box”).animate({height:”300px”});
});
親自試一試
定義和用法
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 函式
出自:http://www.w3school.com.cn/jquery/effect_animate.asp
本文轉自部落格園知識天地的部落格,原文連結:jQuery 效果 – animate() 方法 需轉載請自行聯絡原博主。
相關文章
- jQuery 動畫 - animate() 方法jQuery動畫
- jQuery animate()jQuery
- jQuery 效果方法jQuery
- jquery中css()與animate()jQueryCSS
- jQuery動畫—自定義動畫animate()jQuery動畫
- JQuery的animate方法left和top屬性注意的問題jQuery
- Swiper Animate使用方法
- 自定義動畫方法animate()動畫
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- jQuery 效果jQuery
- jQuery 效果 – 動畫jQuery動畫
- jQuery 效果 – 停止動畫jQuery動畫
- jQuery 效果 – 滑動jQuery
- jQuery基礎 效果jQuery
- jQuery 放大鏡效果jQuery
- 2018-12-14jQuery 效果 - toggle() 方法jQuery
- JQuery滑鼠移到小圖顯示大圖效果的方法jQuery
- jQuery動畫效果的刪除行效果jQuery動畫
- jQuery簡單tab效果jQuery
- jQuery 效果 – 淡入淡出jQuery
- Jquery3D效果jQuery3D
- animate()方法以一次設定多個屬性
- JS animate() 學習JS
- jQuery 放大鏡效果詳解jQuery
- jQuery彈幕效果詳解jQuery
- jQuery打字機效果程式碼jQuery
- jQuery 04 效果 淡入淡出jQuery
- jQuery實現輪播效果jQuery
- jQuery div拖拽效果詳解jQuery
- jQuery水滴彈性摘取效果jQuery
- jQuery抖動效果詳解jQuery
- animate.css的使用CSS
- Vue整合Animate.cssVueCSS
- jquery焦點圖效果視訊jQuery
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列
- jquery中淡入淡出效果案例jQuery
- jQuery 效果 – 隱藏和顯示jQuery
- jQuery 實現淡入淡出效果jQuery