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

jQuery 隱藏和顯示

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

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

例項

複製程式碼 程式碼如下:

$("#hide")k(function(){

$("p")();

});

$("#show")k(function(){

$("p")();

});

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

語法:

複製程式碼 程式碼如下:

$(selector)(speed,callback)

$(selector)(speed,callback)

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

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

例項

複製程式碼 程式碼如下:

$("button")k(function(){

$("p")(1000);

});

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

jQuery 滑動函式 - slideDown, slideUp, slideToggle

jQuery 擁有以下滑動函式:

複製程式碼 程式碼如下:

$(selector)eDown(speed,callback)

$(selector)eUp(speed,callback)

$(selector)eToggle(speed,callback)

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

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

slideDown() 例項

複製程式碼 程式碼如下:

$("")k(function(){

$("l")eDown();

});

jQuery Fade 函式 - fadeIn(), fadeOut(), fadeTo()

jQuery 擁有以下 fade 函式:

複製程式碼 程式碼如下:

$(selector)In(speed,callback)

$(selector)Out(speed,callback)

$(selector)To(speed,opacity,callback)

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

fadeTo() 函式中的 opacity 引數規定減弱到給定的不透明度。

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

jQuery 自定義動畫

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

複製程式碼 程式碼如下:

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

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

複製程式碼 程式碼如下:

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

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

例項

複製程式碼 程式碼如下:

$(document)y(function(){

$("#start")k(function(){

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

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

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

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

});

});

$(selector)() 隱藏被選元素 $(selector)() 顯示被選元素 $(selector)le() 切換(在隱藏與顯示之間)被選元素 $(selector)eDown() 向下滑動(顯示)被選元素 $(selector)eUp() 向上滑動(隱藏)被選元素 $(selector)eToggle() 對被選元素切換向上滑動和向下滑動 $(selector)In() 淡入被選元素 $(selector)Out() 淡出被選元素 $(selector)To() 把被選元素淡出為給定的不透明度 $(selector)ate() 對被選元素執行自定義動畫