jQuery蠻常使用到的一個效果就是某個區塊的顯示或隱藏，
基本用法如下：
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //normal type | |
| $("#clickId").click(function () { | |
| $("#showId").show(); | |
| }); |
clickId 此處的範例是由click觸發，所以這邊就設定要點及產生此效果的id即可!
.hide(), .toggle()
.hide()是隱藏某區塊，但是jQuery也很便利的提供了.toggle()來直接切換顯示與隱藏。
若非有特殊需求要分別設定.show()與.hide()效果不同，通常都使用.toggle()即可。
範例實作：
另外也可以設定特效的效果：
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //special effect:slow, fast | |
| $("#clickId").click(function () { | |
| $("#showId").show('slow'); | |
| }); | |
| //or you can set the hidden time in milliseconds | |
| $("#clickId").click(function () { | |
| $("#showId").hide(1000); //1000ms | |
| }); |
也可以更進一步針對.toggle()裡進行function描述動作，範例如下：
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //write a function make detailed description about the special effect | |
| $("#clickId").click(function () { | |
| $("#showId").show(1000, function() { | |
| alert('Good Job!'); | |
| //do something | |
| }); | |
| }); |
完整程式碼如下：
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>show demo</title> | |
| </head> | |
| <body> | |
| <!-- show element --> | |
| <input type="button" id="btn1" value="showBtn"/> | |
| <!-- hide element --> | |
| <input type="button" id="btn2" value="hideBtn"/> | |
| <!-- transfer element show and hide --> | |
| <input type="button" id="btn3" value="switchBtn"/> | |
| <!-- add special effect --> | |
| <input type="button" id="btn4" value="switchslowBtn"/> | |
| <!-- detailed description about the special effect --> | |
| <input type="button" id="btn5" value="showBtnEff"/> | |
| <!-- Block --> | |
| <div id="showBlock" style="display:none;"> | |
| hi | |
| </div> | |
| <script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
| <script> | |
| //show | |
| $("#btn1").click(function () { | |
| $("#showBlock").show(); | |
| }); | |
| //hide | |
| $("#btn2").click(function () { | |
| $("#showBlock").hide(); | |
| }); | |
| //transfer element show and hide | |
| $("#btn3").click(function () { | |
| $("#showBlock").toggle(); | |
| }); | |
| //add special effect | |
| $("#btn4").click(function () { | |
| $("#showBlock").toggle("slow"); | |
| }); | |
| //add more details effect | |
| $("#btn5").click(function () { | |
| $("#showBlock").show(1000, function() { | |
| alert('Good Job!'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
[1] http://api.jquery.com/category/effects/basics/
沒有留言:
張貼留言