2013年8月15日 星期四

[jQuery] 區塊顯示或隱藏的切換_Block's display switch(.show(), .hide(), .toggle())

.show()

jQuery蠻常使用到的一個效果就是某個區塊的顯示或隱藏,


基本用法如下:
範例實作:
clickId 此處的範例是由click觸發,所以這邊就設定要點及產生此效果的id即可!

.hide(), .toggle()

.hide()是隱藏某區塊,但是jQuery也很便利的提供了.toggle()來直接切換顯示與隱藏。
若非有特殊需求要分別設定.show()與.hide()效果不同,通常都使用.toggle()即可。


範例實作:

另外也可以設定特效的效果:
如上所示,可代入slow、fast或是控制秒數。
也可以更進一步針對.toggle()裡進行function描述動作,範例如下:

範例實作:
完整程式碼如下:

參考文件:
[1] http://api.jquery.com/category/effects/basics/

沒有留言:

張貼留言