1 2 3 4 5 6 7 8 9 10 11 12 13 | <script language="javascript"> $(function(){ $("p").slideDown(); // แสดงแท็ก p ที่ซ่อนอยู่แบบไสลด์เลือนลง $("p").slideUp(); // ซ่อนแท็ก p แบบไสลด์เลื่อนขึ้น // นอกจากนี้เรายังสามารถกำหนดความเร็วของ effects // ได้อีก 3 ระดับ คือ $("p").slideDown("slow"); // แสดงข้อมูลแบบช้า $("p").slideDown("normal"); // แสดงข้อมูลแบบปกติ $("p").slideDown("fast"); // แสดงข้อมูลแบบเร็ว // ซึ่งความเร็วทั้ง 3 ระดับนั้นสามารถใช้กับการซ่อน // ข้อมูลได้เช่น โดยเปลี่ยนจาก slideDown เป็น slideUp });</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").slideDown("slow"); return false; }); $("a#demo2").click(function(){ $("div#show_demo").slideUp("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> |
อ่านต่อที่บทความ