有些復雜的動畫通過之前學到的幾個動畫函數是不能夠實現(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ā)
具體可以參考右邊的代碼效果:
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報