jQuery控制元素顯示 隱藏 切換 滑動的方法

2021-06-22 01:33:56 字數 1989 閱讀 1042

jquery 隱藏和顯示

通過 hide() 和 show() 兩個函式,jquery 支援對 html 元素的隱藏和顯示:

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

hide() 和 show() 都可以設定兩個可選引數:speed 和 callback。

語法:$(selector).hide(speed,callback)$(selector).show(speed,callback)

speed引數規定顯示或隱藏的速度。可以設定這些值:"slow", "fast", "normal" 或毫秒。

callback引數是在 hide 或 show 函式完成之後被執行的函式名稱。

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

jquery 

滑動函式 

-  slidedown, 

slideup, 

slidetoggle

jquery 擁有以下滑動函式:

$(selector).slidedown(speed,callback)$(selector).slideup(speed,callback)$(selector).slidetoggle(speed,callback)

speed引數可以設定這些值:"slow", "fast", "normal" 或毫秒。

callback引數是在該函式完成之後被執行的函式名稱。

例項$(".flip").click(function());

jquery 

fade 

函式 -  fadein(), 

fadeout(), 

fadeto()

jquery 擁有以下 fade 函式:

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

speed引數可以設定這些值:"slow", "fast", "normal" 或 毫秒。

fadeto() 函式中的 

opacity引數規定減弱到給定的不透明度。

callback引數是在該函式完成之後被執行的函式名稱。

jquery 自定義動畫

jquery 函式建立自定義動畫的語法:

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

關鍵的引數是 

params。它定義產生動畫的 css 屬性。可以同時設定多個此類屬性:

animate();

第二個引數是 

duration。它定義用來應用到動畫的時間。它設定的值是:"slow", "fast", "normal" 或毫秒。

例項$(document).ready(function(),"slow");

$("#box").animate(,"slow");

$("#box").animate(,"slow");

$("#box").animate(,"slow");});});

函式描述

$(selector).hide()隱藏被選元素

$(selector).show()顯示被選元素

$(selector).toggle()切換(在隱藏與顯示之間)被選元素

$(selector).slidedown()向下滑動(顯示)被選元素

$(selector).slideup()向上滑動(隱藏)被選元素

$(selector).slidetoggle()對被選元素切換向上滑動和向下滑動

$(selector).fadein()淡入被選元素

$(selector).fadeout()淡出被選元素

$(selector).fadeto()把被選元素淡出為給定的不透明度

$(selector).animate()對被選元素執行自定義動畫

jQuery控制元素隱藏和顯示

1 jquery隱藏和顯示效果 通過 jquery,您可以使用 hide 和 show 方法來隱藏和顯示 html 元素 hide click function 點選id hide 元素時,隱藏所有標籤內容 show click function 點選id show 元素時,顯示所有標籤內容 2 j...

jquery顯示隱藏元素

id css display none id css display block 或 id 0 style.display none id 返回的是jquery 它是個集合肯定沒有display屬性 firststep hide 500 而且可以設定時間 firststep hide 500 而且可...

jquery隱藏顯示元素

1.hide 方法 等效為display none 他可以記住display none之前display的值 2.show 方法 可以恢復hide 呼叫之前dispaly的值同事改變高度寬度不透明度 3.fadein 方法可以通過改變元素的不透明度顯示 4.fadeout 方法可以通過改變元素的不透...