JQuery動畫基礎:上卷下拉

開發工具與關鍵技術: JQuery
作者:咕噠咕噠giao
撰寫時間:2019年4月16日

在這裏插入圖片描述
今天要說的是JQuery動畫基礎其中之一:上卷下拉的動畫效果。
上卷下拉的話分別是JQuery中的 slideUp(上卷),slideDown(下拉),slideToggle(既可以上卷又可以下拉)這三個屬性,接下來再來介紹下這些屬性中的參數:
speed: 三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000),”slow” 最慢,再到 ”normal” ,最快就是 ”fast” ,所以可以按個人喜好來設置快慢,也可以使用它設置好的參數。
easing : (Optional) 用來指定切換效果,默認是 “swing” ,可用參數 “linear”。
fn : 在動畫完成的時候執行的函數,每個元素執行一次。(可以不用設置)
其實後面兩個參數知道就行了,一般情況下都是用第一個就可以的了,第二個設了好像也還是沒有什麼區別,我用實例來演示下吧。
(1):在cshtml上定義好要進行動畫的元素。
在這裏插入圖片描述
這裏需要bootstraps的按鈕,所以就對bootstraps進行了一個引用
在這裏插入圖片描述

就下來就寫jQuery代碼,記住先引用jQuery腳本庫。
在這裏插入圖片描述
因爲不會弄動態圖,小夥伴們可以自行去實驗下看下這個效果。

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