快捷導(dǎo)航

jQuery控制元素顯示、隱藏、切換、滑動(dòng)的方法總結(jié)

更新時(shí)間：2015年04月16日 09:26:37 投稿：junjie

這篇文章主要介紹了jQuery控制元素顯示、隱藏、切換、滑動(dòng)的方法總結(jié),本文講解了hide()、show() 、slideDown、slideUp、 slideToggle、fadeIn()、fadeOut()、fadeTo()等方法使用實(shí)例,需要的朋友可以參考下

jQuery 隱藏和顯示

通過(guò) hide() 和 show() 兩個(gè)函數(shù)，jQuery 支持對(duì) HTML 元素的隱藏和顯示：
實(shí)例

復(fù)制代碼代碼如下:

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

hide() 和 show() 都可以設(shè)置兩個(gè)可選參數(shù)：speed 和 callback。
語(yǔ)法：

復(fù)制代碼代碼如下:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed 參數(shù)規(guī)定顯示或隱藏的速度?？梢栽O(shè)置這些值："slow", "fast", "normal" 或毫秒。
callback 參數(shù)是在 hide 或 show 函數(shù)完成之后被執(zhí)行的函數(shù)名稱。您將在本教程下面的章節(jié)學(xué)習(xí)更多有關(guān) callback 參數(shù)的知識(shí)。
實(shí)例

復(fù)制代碼代碼如下:

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

$("p").hide(1000);

});

callback 參數(shù)是在該函數(shù)完成之后被執(zhí)行的函數(shù)名稱。您將在本教程下面的章節(jié)學(xué)習(xí)更多有關(guān) callback 參數(shù)的知識(shí)。

jQuery 滑動(dòng)函數(shù) - slideDown, slideUp, slideToggle

jQuery 擁有以下滑動(dòng)函數(shù)：

復(fù)制代碼代碼如下:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 參數(shù)可以設(shè)置這些值："slow", "fast", "normal" 或毫秒。
callback 參數(shù)是在該函數(shù)完成之后被執(zhí)行的函數(shù)名稱。您將在本教程下面的章節(jié)學(xué)習(xí)更多有關(guān) callback 參數(shù)的知識(shí)。
slideDown() 實(shí)例

復(fù)制代碼代碼如下:

$(".flip").click(function(){

$(".panel").slideDown();

});

jQuery Fade 函數(shù) - fadeIn(), fadeOut(), fadeTo()
jQuery 擁有以下 fade 函數(shù)：

復(fù)制代碼代碼如下:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

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

speed 參數(shù)可以設(shè)置這些值："slow", "fast", "normal" 或毫秒。
fadeTo() 函數(shù)中的 opacity 參數(shù)規(guī)定減弱到給定的不透明度。
callback 參數(shù)是在該函數(shù)完成之后被執(zhí)行的函數(shù)名稱。您將在本教程下面的章節(jié)學(xué)習(xí)更多有關(guān) callback 參數(shù)的知識(shí)。

jQuery 自定義動(dòng)畫

jQuery 函數(shù)創(chuàng)建自定義動(dòng)畫的語(yǔ)法：

復(fù)制代碼代碼如下:

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

關(guān)鍵的參數(shù)是 params。它定義產(chǎn)生動(dòng)畫的 CSS 屬性?？梢酝瑫r(shí)設(shè)置多個(gè)此類屬性：

復(fù)制代碼代碼如下:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二個(gè)參數(shù)是 duration。它定義用來(lái)應(yīng)用到動(dòng)畫的時(shí)間。它設(shè)置的值是："slow", "fast", "normal" 或毫秒。
實(shí)例

復(fù)制代碼代碼如下:

<script type="text/javascript">

$(document).ready(function(){

$("#start").click(function(){

$("#box").animate({height:300},"slow");

$("#box").animate({width:300},"slow");

$("#box").animate({height:100},"slow");

$("#box").animate({width:100},"slow");

});

});

</script>

函數(shù)	描述
$(selector).hide()	隱藏被選元素
$(selector).show()	顯示被選元素
$(selector).toggle()	切換（在隱藏與顯示之間）被選元素
$(selector).slideDown()	向下滑動(dòng)（顯示）被選元素
$(selector).slideUp()	向上滑動(dòng)（隱藏）被選元素
$(selector).slideToggle()	對(duì)被選元素切換向上滑動(dòng)和向下滑動(dòng)
$(selector).fadeIn()	淡入被選元素
$(selector).fadeOut()	淡出被選元素
$(selector).fadeTo()	把被選元素淡出為給定的不透明度
$(selector).animate()	對(duì)被選元素執(zhí)行自定義動(dòng)畫