1 2 3 4 5 6 7 8 9 10 11 12 13 | <script language="javascript"> $(function(){ $("p").fadeIn(); // แสดงแท็ก p ที่ซ่อนอยู่แบบค่อยๆ แสดงชัดขึ้น $("p").fadeOut(); // ซ่อนแท็ก p แบบค่อยๆ จางหายไป // นอกจากนี้เรายังสามารถกำหนดความเร็วของ effects // ได้อีก 3 ระดับ คือ $("p").fadeIn("slow"); // แสดงข้อมูลแบบช้า $("p").fadeIn("normal"); // แสดงข้อมูลแบบปกติ $("p").fadeIn("fast"); // แสดงข้อมูลแบบเร็ว // ซึ่งความเร็วทั้ง 3 ระดับนั้นสามารถใช้กับซ่อน // ข้อมูลได้เช่น โดยเปลี่ยนจาก fadeIn เป็น fadeOut });</script> |
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
คลิกเพื่อซ่อนข้อความแบบค่อยๆ จากหายไปโค้ดประกอบด้านบน
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <html> <head> <title>demo</title> <script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script> <script language="javascript"> $(function(){ $("a#demo").click(function(){ $("div#show_demo").fadeIn("slow"); return false; }); $("a#demo2").click(function(){ $("div#show_demo").fadeOut("slow"); return false; }); }); </script> <style type="text/css"> #show_demo{ width:120px;height:150px; border:1px solid #cccccc; background-color:#999999; display:none; padding:5px; overflow:hidden; } </style> </head><body><br /> <a href="javascript:void(0)" id="demo">คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น</a><br /> <div id="show_demo"> ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ </div> <a href="javascript:void(0)" id="demo2">คลิกเพื่อซ่อนข้อความแบบค่อยๆ จากหายไป</a><br /></body></html> |
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง