jQuery學習之基本效果

2022-02-23 02:51:09 字數 1826 閱讀 1394

1> show()

顯示隱藏的匹配元素

這個就是 'show( speed, [callback] )' 無動畫的版本。如果選擇的元素是可見的,這個方法將不會改變任何東西。無論這個元素是通過hide()方法隱藏的還是在css裡設定了display:none;,這個方法都將有效。

示例

//顯示所有段落

html **:

hello

jquery **:

$("p").show()

2> hide()

隱藏顯示的元素

這個就是 'hide( speed, [callback] )' 的無動畫版。如果選擇的元素是隱藏的,這個方法將不會改變任何東西。

示例

//隱藏所有段落

jquery **:

$("p").hide()

3> hide(speed,[callback])

以優雅的動畫隱藏所有匹配的元素,並在顯示完成後可選地觸發乙個**函式

可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jquery 1.3中,padding和margin也會有動畫,效果更流暢。

引數speed (string,number) :三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)

callback (function) : (可選) 在動畫完成時執行的函式,每個元素執行一次。

示例4> toggle()

切換元素的可見狀態

如果元素是可見的,切換為隱藏的;如果元素是隱藏的,切換為可見的。

示例

//切換所有段落的可見狀態。

html **:

hello

hello again

jquery **:

$("p").toggle()

結果:hello

hello again

5>toggle( switch )

根據switch引數切換元素的可見狀態(ture為可見,false為隱藏)

如果switch設為true,則呼叫show()方法來顯示匹配的元素,如果switch設為false則呼叫hide()來隱藏元素。

示例

//切換所有段落的可見狀態。

html **:

hello

hello again

jquery **:

var flip = 0;

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

結果:hello

hello again

6> toggle(speed,[callback])

以優雅的動畫切換所有匹配的元素,並在顯示完成後可選地觸發乙個**函式

可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。在jquery 1.3中,padding和margin也會有動畫,效果更流暢。

引數speed (string,number) :三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)

callback (function) : (可選) 在動畫完成時執行的函式,每個元素執行一次。

示例

//用600毫秒的時間將段落緩慢的切換顯示狀態

jquery **:

$("p").toggle("slow");

用200毫秒將段落迅速切換顯示狀態,之後彈出乙個對話方塊。

jquery **:

$("p").toggle("fast",function());

jQuery學習之 效果

今天繼續學習一下jquery,主要記錄一下jquery的那些效果顯示 1.animate 函式 animate 方法執行 css 屬性集的自定義動畫。該方法通過css樣式將元素從乙個狀態改變為另乙個狀態。css屬性值是逐漸改變的,這樣就可以建立動畫效果。只有數字值可建立動畫 比如 margin 30...

jQuery學習之動畫效果

show hide 1.實現可折疊的列表 li has ul click function event else return false css cursor pointer click li not has ul css 2.切換元素的顯示狀態 toggle 可以切換顯示和隱藏狀態,替代show...

jQuery之動畫效果

1 show 顯示效果 語法 show speed,callback number string,function speend為動畫執行時間,單位為毫秒。也可以為slow normal fast callback可選,為當動畫完成時執行的函式。show speed,easing callback ...