您好,登錄后才能下訂單哦!
用JavaScript實(shí)現(xiàn)動(dòng)畫,原理非常簡(jiǎn)單:我們只需要以固定的時(shí)間間隔(例如,0.1秒),每次把DOM元素的CSS樣式修改一點(diǎn)(例如,高寬各增加10%),看起來(lái)就像動(dòng)畫了。
但是要用JavaScript手動(dòng)實(shí)現(xiàn)動(dòng)畫效果,需要編寫非常復(fù)雜的代碼。如果想要把動(dòng)畫效果用函數(shù)封裝起來(lái)便于復(fù)用,那考慮的事情就更多了。
使用jQuery實(shí)現(xiàn)動(dòng)畫,代碼已經(jīng)簡(jiǎn)單得不能再簡(jiǎn)化了:只需要一行代碼!
讓我們先來(lái)看看jQuery內(nèi)置的幾種動(dòng)畫樣式:
show / hide
直接以無(wú)參數(shù)形式調(diào)用show()和hide(),會(huì)顯示和隱藏DOM元素。但是,只要傳遞一個(gè)時(shí)間參數(shù)進(jìn)去,就變成了動(dòng)畫:
var div = $('#test-show-hide'); div.hide(3000); // 在3秒鐘內(nèi)逐漸消失
時(shí)間以毫秒為單位,但也可以是'slow','fast'這些字符串:
var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒鐘內(nèi)逐漸顯示
toggle()方法則根據(jù)當(dāng)前狀態(tài)決定是show()還是hide()。
slideUp / slideDown
你可能已經(jīng)看出來(lái)了,show()和hide()是從左上角逐漸展開或收縮的,而slideUp()和slideDown()則是在垂直方向逐漸展開或收縮的。
slideUp()把一個(gè)可見的DOM元素收起來(lái),效果跟拉上窗簾似的,slideDown()相反,而slideToggle()則根據(jù)元素是否可見來(lái)決定下一步動(dòng)作:
var div = $('#test-slide'); div.slideUp(3000); // 在3秒鐘內(nèi)逐漸向上消失
fadeIn / fadeOut
fadeIn()和fadeOut()的動(dòng)畫效果是淡入淡出,也就是通過(guò)不斷設(shè)置DOM元素的opacity屬性來(lái)實(shí)現(xiàn),而fadeToggle()則根據(jù)元素是否可見來(lái)決定下一步動(dòng)作:
var div = $('#test-fade'); div.fadeOut('slow'); // 在0.6秒內(nèi)淡出
自定義動(dòng)畫
如果上述動(dòng)畫效果還不能滿足你的要求,那就祭出最后大招:animate(),它可以實(shí)現(xiàn)任意動(dòng)畫效果,我們需要傳入的參數(shù)就是DOM元素最終的CSS狀態(tài)和時(shí)間,jQuery在時(shí)間段內(nèi)不斷調(diào)整CSS直到達(dá)到我們?cè)O(shè)定的值:
var div = $('#test-animate'); div.animate({ opacity: 0.25, width: '256px', height: '256px' }, 3000); // 在3秒鐘內(nèi)CSS過(guò)渡到設(shè)定值
animate()還可以再傳入一個(gè)函數(shù),當(dāng)動(dòng)畫結(jié)束時(shí),該函數(shù)將被調(diào)用:
var div = $('#test-animate'); div.animate({ opacity: 0.25, width: '256px', height: '256px' }, 3000, function () { console.log('動(dòng)畫已結(jié)束'); // 恢復(fù)至初始狀態(tài): $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px'); });
實(shí)際上這個(gè)回調(diào)函數(shù)參數(shù)對(duì)于基本動(dòng)畫也是適用的。
有了animate(),你就可以實(shí)現(xiàn)各種自定義動(dòng)畫效果了:
animate()
串行動(dòng)畫
jQuery的動(dòng)畫效果還可以串行執(zhí)行,通過(guò)delay()方法還可以實(shí)現(xiàn)暫停,這樣,我們可以實(shí)現(xiàn)更復(fù)雜的動(dòng)畫效果,而代碼卻相當(dāng)簡(jiǎn)單:
var div = $('#test-animates'); // 動(dòng)畫效果:slideDown - 暫停 - 放大 - 暫停 - 縮小 div.slideDown(2000) .delay(1000) .animate({ width: '256px', height: '256px' }, 2000) .delay(1000) .animate({ width: '128px', height: '128px' }, 2000); } </script>
因?yàn)閯?dòng)畫需要執(zhí)行一段時(shí)間,所以jQuery必須不斷返回新的Promise對(duì)象才能后續(xù)執(zhí)行操作。簡(jiǎn)單地把動(dòng)畫封裝在函數(shù)中是不夠的。
為什么有的動(dòng)畫沒有效果
你可能會(huì)遇到,有的動(dòng)畫如slideUp()
根本沒有效果。這是因?yàn)閖Query動(dòng)畫的原理是逐漸改變CSS的值,如height從100px逐漸變?yōu)?。但是很多不是block性質(zhì)的DOM元素,對(duì)它們?cè)O(shè)置height根本就不起作用,所以動(dòng)畫也就沒有效果。
此外,jQuery也沒有實(shí)現(xiàn)對(duì)background-color
的動(dòng)畫效果,用animate()設(shè)置background-color
也沒有效果。這種情況下可以使用CSS3的transition實(shí)現(xiàn)動(dòng)畫效果。
免責(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)容。