jquery 是為事件處理特別設計的。
————————————————————
jquery 事件函式
隱藏、顯示、切換、滑動 以及動畫
例項 jquery hide()
演示簡單的 jquery hide() 函式。
jquery hide()
hide mecontact: helen bennett
garden house crowther way
london
hide me
contact: marie bertrand
265, boulevard charonne
paris
另乙個 hide() 演示。如何隱藏部分文字。
jquery slidetoggle()
because time is valuable, we deliver quick and easy learning.at w3school, you can study everything you need to learn, in an accessible and handy format.
show/hide panel
演示簡單的 slide panel 效果。
jquery fadeto()
click to fade
演示簡單的 jquery fadeto() 函式。
jquery animate()
start animation
演示簡單的 jquery animate() 函式。
————————————————————
jquery 隱藏和顯示
通過 hide() 和 show() 兩個函式,jquery 支援對 html 元素的隱藏和顯示: 例項
hidehide() 和 show() 都可以設定兩個可選引數:speed 和 callback。show
語法:
$(selector).hide(speed,callback)callback 引數是在 hide 或 show 函式完成之後被執行的函式名稱。您將在本教程下面的章節學習更多有關 callback 引數的知識。$(selector).show(speed,callback)
speed 引數可以設定這些值:"slow", "fast", "normal" 或 milliseconds:
例項
hidethis is a paragraph with little content.
this is another small paragraph.
————————————————————
jquery 切換
jquery toggle() 函式使用 show() 或 hide() 函式來切換 html 元素的可見狀態。
隱藏顯示的元素,顯示隱藏的元素。
語法:
$(selector).toggle(speed,callback)speed 引數可以設定這些值:"slow", "fast", "normal" 或 毫秒。
例項
togglethis is a paragraph with little content.
this is another small paragraph.
callback 引數是在 hide 或 show 函式完成之後被執行的函式名稱。您將在本教程下面的章節學習更多有關 callback 引數的知識。
————————————————————
jquery 滑動函式 - slidedown, slideup, slidetoggle
jquery 擁有以下滑動函式:
$(selector).slidedown(speed,callback)speed 引數可以設定這些值:"slow", "fast", "normal" 或 毫秒。$(selector).slideup(speed,callback)
$(selector).slidetoggle(speed,callback)
callback 引數是在 hide 或 show 函式完成之後被執行的函式名稱。您將在本教程下面的章節學習更多有關 callback 引數的知識。
slidedown() 例項
because time is valuable, we deliver quick and easy learning.slideup() 例項at w3school, you can study everything you need to learn, in an accessible and handy format.
show panel
because time is valuable, we deliver quick and easy learning.slidetoggle() 例項at w3school, you can study everything you need to learn, in an accessible and handy format.
hide panel
because time is valuable, we deliver quick and easy learning.at w3school, you can study everything you need to learn, in an accessible and handy format.
show/hide panel
————————————————————
jquery fade 函式 - fadein(), fadeout(), fadeto()
jquery 擁有以下 fade 函式:
$(selector).fadein(speed,callback)speed 引數可以設定這些值:"slow", "fast", "normal" 或 毫秒。$(selector).fadeout(speed,callback)
$(selector).fadeto(speed,opacity,callback)
fadeto() 函式中的 opacity 引數規定減弱到給定的不透明度。
callback 引數是在 hide 或 show 函式完成之後被執行的函式名稱。您將在本教程下面的章節學習更多有關 callback 引數的知識。
fadeto() 例項
click to fade
fadeout() 例項
click me away!if you click on the box above, it will be removed.
————————————————————
jquery 自定義動畫
jquery 函式建立自定義動畫的語法:
$(selector).animate(,[duration],[easing],[callback])
關鍵的引數是 params。它定義了產生動畫的屬性。可以同時設定多個此類屬性:
animate();第二個引數是 duration。它定義用來應用於動畫的時間。它設定的值是:"slow", "fast", "normal" 或 毫秒。
例項 1
start animation例項 2
start animationhtml 元素預設是靜態定位,且無法移動。hello
如需使元素可以移動,請把 css 的 position 設定為 relative 或 absolute。
jquery 效果 - 來自本頁
函式 描述 $(selector).hide() 隱藏被選元素 $(selector).show() 顯示被選元素 $(selector).toggle() 切換(在隱藏與顯示之間)被選元素 $(selector).slidedown() 向下滑動(顯示)被選元素 $(selector).slideup() 向上滑動(隱藏)被選元素 $(selector).slidetoggle() 對被選元素切換向上滑動和向下滑動 $(selector).fadein() 淡入被選元素 $(selector).fadeout() 淡出被選元素 $(selector).fadeto() 把被選元素淡出為給定的不透明度 $(selector).animate() 對被選元素執行自定義動畫
jquery學習5 動畫
show hide 引數 動畫持續時間 動畫完成監聽 div show 1000,function div slidedown 1000,function div slideup 如果是滑入狀態,就執行滑出的動畫,div slidetoggle div fadein 2000 div fadeout...
jquery學習5 動畫
show hide 引數 動畫持續時間 動畫完成監聽 div show 1000,function div slidedown 1000,function div slideup 如果是滑入狀態,就執行滑出的動畫,div slidetoggle div fadein 2000 div fadeout...
JQuery學習 5 事件 2
4 toggle事件 用法一 依次執行事件到最後之後回覆到第乙個事件迴圈往復執行只有在單擊元素本身時才會被觸發 img toggle function function function function function 用法二 重複呼叫show 和hide 方法 button1 click fu...