jQuery學習筆記之二 顯示效果

2021-07-11 20:51:28 字數 2201 閱讀 5020

1、顯示 隱藏

使用 hide() 和 show() 方法來隱藏和顯示 html 元素;使用 toggle() 方法來切換 hide() 和 show() 方法。

語法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

其中

speed 為隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒;callback 為執行操作hide()、show()、 toggle() 方法完成後所執行的函式名稱。

$("#hide").click(function());$("#show").click(function());

$("#toggle").click(function());
2、淡入淡出(fadein fadeout fadetoggle fadeto)

語法:

$(selector).fadein(speed,callback);

$(selector).fadeout(speed,callback);
$(selector).fadetoggle(speed,callback);
$(selector).fadeto(speed,opacity,callback);
fadein() 用於淡入已隱藏的元素;fadeout() 方法用於淡出可見元素;fadetoggle() 方法可以在 fadein() 與 fadeout() 方法之間進行切換;fadeto() 方法允許漸變為給定的不透明度(值介於 0 與 1 之間),opacity為透明度值,speed和callback同1。

示例:

$("button").click(function());

3、滑動(slidedown slideup slidetoggle)

語法:

$(selector).slidedown(speed,callback);
$(selector).slideup(speed,callback);
$(selector).slidetoggle(speed,callback);
slidedown() 方法用於向下滑動元素;slideup() 方法用於向上滑動元素;slidetoggle() 方法可以在 slidedown() 與 slideup() 方法之間進行切換。

4、自定義動畫(animate)

語法:

$(selector).animate(,speed,callback);
params 引數定義形成動畫的 css 屬性。params的css屬性即為動作後的最終屬性。

示例1:

$("button").click(function());

});

示例2:

$("button").click(function(),"slow");

div.animate(,"slow");

div.animate(,"slow");

div.animate(,"slow");

});一幀串起來就成了乙個動畫。

具體的動畫效果可參見:

5、停止動畫或者滑動(stop)

stop() 方法用於停止動畫或效果,在它們完成之前,適用於所有 jquery 效果函式,包括滑動、淡入淡出和自定義動畫。

語法:$(selector).stop(stopall,gotoend);

可選的 stopall 引數規定是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。

可選的 gotoend 引數規定是否立即完成當前動畫。預設是 false。

因此,預設地,stop() 會清除在被選元素上指定的當前動畫。

示例:

$("#panel").stop();

6、鏈條式

$("#p1").css("color","red").slideup(2000).slidedown(2000);
可依次執行。

jQuery學習之二 jQuery效果

1 jquery 效果之隱藏和顯示 selector toggle speed,callback 隱藏 顯示切換 可選的 speed 引數規定隱藏 顯示的速度,可以取以下值 slow fast 或毫秒。可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。利用隱藏和顯示功能可以實現tab...

jQuery學習筆記2 jQuery簡易效果

接上次的jquery學習筆記,這次的主題就是其簡易效果,例如淡入淡出,顯示隱藏的效果。整理網上的資料,可以得到這樣乙個方法列表。方法描述 animate 對被選元素應用 自定義 的動畫 clearqueue 對被選元素移除所有排隊函式 仍未執行的 delay 對被選元素的所有排隊函式 仍未執行 設定...

jQuery自學筆記(三) jQuery動畫效果

jquery隱藏和顯示 使用 hide 和 show 方法來隱藏和顯示 html 元素 語法 selector hide speed,callback selector show speed,callback 可選的 speed 引數規定隱藏 顯示的速度,可以取以下值 slow fast 或毫秒,可...