jQuery 效果

親自試一試

請?jiān)囈幌逻@個(gè) jQuery 效果：

請點(diǎn)擊這里

jQuery 隱藏和顯示

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

實(shí)例

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

親自試一試

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

語法：

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed 參數(shù)規(guī)定顯示或隱藏的速度。可以設(shè)置這些值："slow", "fast", "normal" 或毫秒。

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

實(shí)例

$("button").click(function(){
$("p").hide(1000);
});

親自試一試

jQuery 切換

jQuery toggle() 函數(shù)使用 show() 或 hide() 函數(shù)來切換 HTML 元素的可見狀態(tài)。

隱藏顯示的元素，顯示隱藏的元素。

語法：

$(selector).toggle(speed,callback)

speed 參數(shù)可以設(shè)置這些值："slow", "fast", "normal" 或 毫秒。

實(shí)例

$("button").click(function(){
$("p").toggle();
});

親自試一試

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

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

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

$(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í)例

$(".flip").click(function(){
$(".panel").slideDown();
});

親自試一試

slideUp() 實(shí)例

$(".flip").click(function(){
$(".panel").slideUp()
})

親自試一試

slideToggle() 實(shí)例

$(".flip").click(function(){
$(".panel").slideToggle();
});

親自試一試

jQuery Fade 函數(shù) - fadeIn(), fadeOut(), fadeTo()

jQuery 擁有以下 fade 函數(shù)：

$(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í)。

fadeTo() 實(shí)例

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

親自試一試

fadeOut() 實(shí)例

$("button").click(function(){
$("div").fadeOut(4000);
});

親自試一試

jQuery 自定義動(dòng)畫

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

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

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

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

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

實(shí)例 1

<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í)例 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script> 

親自試一試

HTML 元素默認(rèn)是靜態(tài)定位，且無法移動(dòng)。

如需使元素可以移動(dòng)，請把 CSS 的 position 設(shè)置為 relative 或 absolute。

jQuery 效果 - 來自本頁

如需完整的參考手冊，請?jiān)L問我們的 jQuery Effect 參考手冊。