DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 8.9 深入了解jQuery動畫
8.9 深入了解jQuery動畫
編輯:jQuery基礎知識     

在之前的學習中,准確來說,我們接觸了4種jQuery動畫形式:

  • (1)顯示和隱藏;
  • (2)淡入和淡出;
  • (3)滑上和滑下;
  • (4)自定義動畫;

其實所有jQuery動畫效果,從本質上來說,都是通過改變元素的CSS屬性來實現的,也就是說:jQuery動畫就是通過將元素的屬性從“一個屬性值”在一定時間內平滑地過渡到“另一個屬性值”,從而實現動畫效果。

此外在jQuery中,對於“顯示和隱藏、淡入和淡出、滑上和滑下”這3種動畫,實現的原理如下:

  • (1)顯示和隱藏:通過改變width、height、opacity、display來實現動畫的顯示和隱藏;
  • (2)淡入和淡出:通過改變opacity、display來實現動畫的淡入和淡出;
  • (3)滑上和滑下:通過改變height、display來實現動畫的滑上和滑下;

通過深入剖析這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水平更上一層樓,不然就永遠卡在那個瓶頸中。在這一點上,我有過非常深刻的體會。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved