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

jQuery 隱藏與顯示

透過 hide() 和 show() 兩個函數，jQuery 支援對 HTML 元素的隱藏和顯示：
實例

複製程式碼 程式碼如下:

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

hide() 和 show() 都可以設定兩個可選參數：speed 和 callback。
語法：

複製程式碼 程式碼如下:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed 參數規定顯示或隱藏的速度。可以設定這些值："slow", "fast", "normal" 或毫秒。
callback 參數是在 hide 或 show 函數完成之後被執行的函數名稱。您將在本教程下面的章節中學習更多有關 callback 參數的知識。
實例

複製程式碼 程式碼如下:

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

callback 參數是在該函數完成之後被執行的函數名稱。您將在本教程下面的章節中學習更多有關 callback 參數的知識。

jQuery 滑動函數 - slideDown, slideUp, slideToggle

jQuery 擁有以下滑動函數：

複製程式碼 程式碼如下:

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed 參數可以設定這些值："slow", "fast", "normal" 或毫秒。
callback 參數是在該函數完成之後被執行的函數名稱。您將在本教程下面的章節中學習更多有關 callback 參數的知識。
slideDown() 實例

複製程式碼 程式碼如下:

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

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 參數是在該函數完成之後被執行的函數名稱。您將在本教程下面的章節中學習更多有關 callback 參數的知識。

jQuery 自訂動畫

jQuery 函數建立自訂動畫的語法：

複製程式碼 程式碼如下:

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

關鍵的參數是 params。它定義產生動畫的 CSS 屬性。可以同時設定多個此類屬性：

複製程式碼 程式碼如下:

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

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

複製程式碼 程式碼如下:

$(文檔).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"慢");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"慢");
$("#box").animate({width:100},"slow");
});
});
腳本>

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画