第 11 章 動畫效果

2022-08-13 18:45:15 字數 2935 閱讀 2606

學習要點:

1.顯示、隱藏

2.滑動、捲動

3.淡入、淡出

4.自定義動畫

5.列隊動畫方法

6.動畫相關方法

7.動畫全域性屬性

一. 顯示、隱藏

jquery 中顯示方法為:.show(),隱藏方法為:.hide()。在無引數的時候,只是硬性的顯

示內容和隱藏內容。

$('.show').click(function () );

$('.hide').click(function () );

在.show()和.hide()方法可以傳遞乙個引數,這個引數以毫秒(1000 毫秒等於 1 秒鐘)來控

制速度。並且裡面富含了勻速變大變小,以及透明度變換。

除了直接使用毫秒來控制速度外,jquery 還提供了三種預設速度引數字串:slow、

normal 和 fast,分別對應 600 毫秒、400 毫秒和 200 毫秒。預設 400 毫秒

//使用.show()和.hide()的**函式,可以實現列隊動畫效果。

$('.show').click(function () );

});//列隊動畫,使用函式名呼叫自身

$('.show').click(function () );

});//列隊動畫,使用 arguments.callee 匿名函式自呼叫

$('.hide').click(function () );

});我們在使用.show()和.hide()的時候,如果需要乙個按鈕切換操作,需要進行一些條件判

斷。而 jquery 提供給我們乙個類似功能的獨立方法:.toggle()。

$('.toggle').click(function () );

二.滑動、捲動

jquery 提供了一組改變元素高度的方法:.slideup()、.slidedown()和.slidetoggle()。顧名

思義,向上收縮(捲動)和向下展開(滑動)。

$('.down').click(function () );

$('.up').click(function () );

$('.toggle').click(function () );

注意:滑動、捲動效果和顯示、隱藏效果一樣,具有相同的引數。

三. 淡入、淡出

jquery 提供了一組專門用於透明度變化的方法:.fadein()和.fadeout(),分別表示淡入、

淡出,當然還有乙個自動切換的方法:.fadetoggle()。

$('.in').click(function () );

$('.out').click(function () );

$('.toggle').click(function () );

上面三個透明度方法只能是從 0 到 100,或者從 100 到 0,如果我們想設定指定值就沒

有辦法了。而 jquery 為了解決這個問題提供了.fadeto()方法。

$('.toggle').click(function () );

注意:淡入、淡出效果和顯示、隱藏效果一樣,具有相同的引數。對於.fadeto()方法,

如果本身透明度大於指定值,會淡出,否則相反。

四. 自定義動畫

jquery 提供了幾種簡單常用的固定動畫方面我們使用。但有些時候,這些簡單動畫無法

滿足我們更加複雜的需求。這個時候,jquery 提供了乙個.animate()方法來建立我們的自定

義動畫,滿足更多複雜多變的要求。

$('.animate').click(function () );

});

必傳的引數只有乙個,就是乙個鍵值對 css 變化樣式的物件。還有兩個可選引數分別

速度和**函式

$('.animate').click(function () , 1000, function () );

});

到目前位置,我們都是建立的固定位置不動的動畫。如果想要實現運動狀態的位移動畫,

那就必須使用自定義動畫,並且結合 css 的絕對定位功能。

$('.animate').click(function () );

});自定義動畫中,每次開始運動都必須是初始位置或初始狀態,而有時我們想通過當前位

置或狀態下再進行動畫。jquery 提供了自定義動畫的累加、累減功能。

$('.animate').click(function () );

});自定義實現列隊動畫的方式,有兩種:1.在**函式中再執行乙個動畫;2.通過連綴或

順序來實現列隊動畫。

//通過依次順序實現列隊動畫

$('.animate').click(function () );

$('#box').animate();

$('#box').animate();

});注意:如果不是同乙個元素,就會實現同步動畫

//通過連綴實現列隊動畫

$('.animate').click(function () ).animate().animate();

});//通過**函式實現列隊動畫

$('.animate').click(function () , function () , function () );

});});

});

C和指標 第11章 動態記憶體分配

2.記憶體分配 void malloc size t size void free void pointer malloc stdlib.h 的引數是需要分配的記憶體位元組 字元 數。如果記憶體池的可用記憶體可用滿足這個需求,返回乙個指向被分配的連續的記憶體塊的起始位置的指標。如果記憶體池為空,或者...

第11章 動態方法呼叫和使用萬用字元定義action

web inf page message.jsp 瀏覽器中輸入 http localhost 8080 struts2 control employee list execute.action 來呼叫action檔案中的方法 package cn.itcast.action public class...

移動端 第十章 動畫

動畫屬性 animation animation name 動畫的名字 animation duration 動畫完成乙個週期所花費的時間 秒 毫秒 animation timing function 動畫的速度曲線 linear ease ease in ease out ease in out ...