在之前的學習中,准確來說,我們接觸了4種jQuery動畫形式:
其實所有jQuery動畫效果,從本質上來說,都是通過改變元素的CSS屬性來實現的,也就是說:jQuery動畫就是通過將元素的屬性從“一個屬性值”在一定時間內平滑地過渡到“另一個屬性值”,從而實現動畫效果。
此外在jQuery中,對於“顯示和隱藏、淡入和淡出、滑上和滑下”這3種動畫,實現的原理如下:
通過深入剖析這3種動畫形式的本質,我們得出一個道理:對於這幾個動畫,我們完全可以使用animate()方法來實現。其實,這3種動畫形式本身就是使用animate()方法來實現的,只不過jQuery把它們封裝得更為簡單罷了!原來,原來……這一章學了那麼多,本質上來說就一個東西:animate()。
我們接下來舉幾個簡單的例子給大家,每一組中的2句代碼都是等價的:
$().hide(500); $().animate({"width":"0","height":"0","opacity":"0.0","display":"none"},500);
$().fadeOut(500); $().animate({"opacity":"0.0","display":"none"},500);
$().slideUp(500); $().animate({"height":"0,""opacity":"0.0","display":"none"},500);
在實際開發中,我們更傾向於使用“自定義動畫”來實現各種動畫效果,因為之前這3種動畫形式在使用上給了我們有很大的限制。
在這一節中,通過深入剖析jQuery動畫的本質,很多東西我們有了“柳暗花明又一村”的感覺,也使得我們知識架構更加完整。不光是jQuery,特別是針對JavaScript高級部分的知識,我們只有深入探討各個知識的本質才有可能使得我們的JS水平更上一層樓,不然就永遠卡在那個瓶頸中。在這一點上,我有過非常深刻的體會。