第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

章節(jié)
問答
課簽
筆記
評論
占位
占位

jQuery中動畫animate(上)

有些復雜的動畫通過之前學到的幾個動畫函數是不能夠實現(xiàn),這時候就需要強大的animate方法了

操作一個元素執(zhí)行3秒的淡入動畫,對比一下2組動畫設置的區(qū)別

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

顯而易見,animate方法更加靈活了,可以精確的控制樣式屬性從而執(zhí)行動畫

語法:

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

.animate()方法允許我們在任意的數值的CSS屬性上創(chuàng)建動畫。2種語法使用,幾乎差不多了,唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設置.css()方法的屬性鍵值對類似,除了屬性范圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了

參數分解:

properties:一個或多個css屬性的鍵值對所構成的Object對象。要特別注意所有用于動畫的屬性必須是數字的,除非另有說明;這些屬性如果不是數字的將不能使用基本的jQuery功能。比如常見的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以,因為參數是red或者GBG這樣的值,非常用插件,否則正常情況下是不能只用動畫效果的。注意,CSS 樣式使用 DOM 名稱(比如 "fontSize")來設置,而非 CSS 名稱(比如 "font-size")。

特別注意單位,屬性值的單位像素(px),除非另有說明。單位em 和 %需要指定使用

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

除了定義數值,每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏

.animate({
    width: "toggle"
});

如果提供一個以+= 或 -=開始的值,那么目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

.animate({ 
    left: '+=50px'
}, "slow");

duration時間

動畫執(zhí)行的時間,持續(xù)時間是以毫秒為單位的;值越大表示動畫執(zhí)行的越慢,不是越快。還可以提供'fast' 和 'slow'字符串,分別表示持續(xù)時間為200 和 600毫秒。

easing動畫運動的算法

jQuery庫中默認調用 swing。如果需要其他的動畫算法,請查找相關的插件

complete回調

動畫完成時執(zhí)行的函數,這個可以保證當前動畫確定完成后發(fā)會觸發(fā)

具體可以參考右邊的代碼效果:

任務

   

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優(yōu)惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態(tài)

舉報

0/150
提交
取消
全部 精華 我要發(fā)布
全部 我要發(fā)布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發(fā)表

為什么扣積分?

本次提問將花費2個積分

繼續(xù)發(fā)表請點擊 "確定"

為什么扣積分?