JQuery動畫

       toggle、sildeToggle和fadeToggle的區別和自定義動畫.animate()

1   操作元素顯示和隱藏的常見的4種方法
   改變樣式display爲none
   設置位置高度爲0
   設置透明度爲0
   還有show/hide、sildeDown/sildeUp、fadeIn/fadeOut、toggle、sildeToggle和fadeToggle切換方法

2   toggle、sildeToggle和fadeToggle的區別

   toggle切換顯示與隱藏效果,動態效果爲從右至左,橫向動作,通過display來判斷切換所有匹配元素的可見性    

   sildeToggle切換上下拉卷滾效果,動態效果從下至上,豎向動作, 通過高度變化來切換所有匹配元素的可見性    

   fadeToggle切換淡入淡出效果
3   .animate()可以精確的控制樣式屬性從而執行動畫,允許在任意的數值的CSS屬性上創建動畫

4   常見的.animate()語法

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

   .animate( properties, options )傳遞一個對象參數可以拿到動畫執行狀態的一些通知

5   options參數

   duration設置動畫執行的時間

   easing規定要使用的easing函數,過渡使用哪種緩動函數

   step規定每個動畫的每一步完成之後要執行的函數

   progress每次動畫調用的時候都會執行這個回調,是一個進度的概念

   complete動畫完成回調

6   如果多個元素執行動畫,回調將會在每個匹配的元素上執行一次,不是作爲整個動畫執行一次

7   唯一必要的屬性是一組CSS屬性鍵值對,這組屬性和用於設置.css()方法的屬性鍵值對類似,除了屬性範圍做了更多限制,第二個參數可以單獨傳遞多個實參也可以合併成一個對象傳遞

8   properties一個或多個css屬性的鍵值對所構成的Object對象,所有用於動畫的屬性必須是數字的,除非另有說明,如果不是數字將不能使用基本的jQuery功能,比如border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing都是能產生動畫效果的,background-color不可以,因爲參數是red或者GBG這樣的值,非常用插件,正常情況下是不能只用動畫效果的

9   CSS 樣式使用 DOM 名稱(比如 "fontSize")來設置,而非 CSS 名稱(比如 "font-size")

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

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

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

13   動畫執行的時間,持續時間是以毫秒爲單位的,值越大表示動畫執行的越慢,不是越快,還可以提供'fast' 和 'slow'字符串,分別表示持續時間爲200 和 600毫秒

14   easing動畫運動的算法在jQuery庫中默認調用 swing,如果需要其他的動畫算法,則查找相關的插件

15   complete回調,動畫完成時執行的函數,可以保證當前動畫確定完成後發會觸發

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章