jQuery 效果

親自試一試

請試一下這個 jQuery 效果：

請點擊這里

jQuery 隱藏和顯示

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

實例

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

親自試一試

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

語法：

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed 參數(shù)規(guī)定顯示或隱藏的速度?？梢栽O置這些值："slow", "fast", "normal" 或毫秒。

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

實例

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

親自試一試

jQuery 切換

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

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

語法：

$(selector).toggle(speed,callback)

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

實例

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

親自試一試

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

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

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

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

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

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

slideDown() 實例

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

親自試一試

slideUp() 實例

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

親自試一試

slideToggle() 實例

$(".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ù)可以設置這些值："slow", "fast", "normal" 或 毫秒。

fadeTo() 函數(shù)中的 opacity 參數(shù)規(guī)定減弱到給定的不透明度。

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

fadeTo() 實例

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

親自試一試

fadeOut() 實例

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

親自試一試

jQuery 自定義動畫

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

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

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

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

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

實例 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> 

親自試一試

實例 2

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

親自試一試

HTML 元素默認是靜態(tài)定位，且無法移動。

如需使元素可以移動，請把 CSS 的 position 設置為 relative 或 absolute。

jQuery 效果 - 來自本頁

如需完整的參考手冊，請訪問我們的 jQuery Effect 參考手冊。