JQuery自學記錄2 部分動態效果

2021-06-09 18:12:00 字數 1351 閱讀 3452

利用jquery的一些函式可以直接實現部分動態的效果,主要涉及以下幾個(還有很多):

1、隱藏與顯示:hide(); show(); toggle();

2、滑動效果:slidedown(); slideup(); slidetoggle();

3、漸變效果:fadein(); fadeout(); fadeto();

4、自定義動畫函式:animate();

一、hide(); show();  toggle();

語法格式:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

$(selector).toggle(speed,callback)

說明:speed:(可選)設定效果的變化速度,有slow, fast, normal或具體毫秒值可以選。

callback:(可選)設定後續執行函式。注:是在該效果100%執行完畢後才會執行callback函式,根據具體情況使用。當變化速度慢時可能出現效果混亂。

例項:

二、slidedown(); slideup(); slidetoggle();

語法格式:

$(selector).slidedown(speed,callback)

$(selector).slideup(speed,callback)

$(selector).slidetoggle(speed,callback)

三、fadein(); fadeout(); fadeto();

語法格式:

$(selector).fadein(speed,callback)

$(selector).fadeout(speed,callback)

$(selector).fadeto(speed,opacity,callback)

說明:fadeto() 函式中的 opacity (可選)引數規定減弱到給定的不透明度

四、animate();

語法格式:

$(selector).animate(,[duration],[easing],[callback])

說明:params:(必需)該變化的目標css樣式

duration:(可選)類似上面的speed,設定該變化的速度,有slow, fast, normal或具體毫秒值可以選。

easing:(可選)設定動畫不同時間點的速度,備選swing, linear,更多效果需要擴充套件外掛程式。(沒有試驗過具體效果)

callback:(可選)同上。

例項:

未完待續……

練習2部分題解

問題 g 汽水瓶 時間限制 1 sec 記憶體限制 128 mb提交 93 解決 45 201501010119 提交狀態討論版 題目描述 有這樣一道智力題 某商店規定 三個空汽水瓶可以換一瓶汽水。小張手上有十個空汽水瓶,她最多可以換多少瓶汽水喝?答案是5瓶,方法如下 先用9個空瓶子換3瓶汽水,喝掉...

scratch 3 0 部分記錄

costumes 造型 currentcostumeindex 0,新增到舞台時初始化展示的造型 scratchx 20,scratchy 38,scale 1,direction 90,rotationstyle normal isdraggable false visible true spri...

Vue的基礎語法2 部分

lang en charset utf 8 基礎語法title src js vue.js script head type text v model salary v for u,i in users span span span li ul div const vm newvue birthda...