มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3
เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdeejquery effect
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery effect
ดูแล้ว 14,482 ครั้ง
ไปที่
Copy
การซ่อนและแสดงข้อมูลในลํกษณะค่อยๆ แสดงชัดขึ้นและค่อยๆ จากหายไป
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น
โค้ดประกอบด้านบน
<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>
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
คลิกเพื่อซ่อนข้อความแบบค่อยๆ จากหายไปโค้ดประกอบด้านบน
<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>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
อ่านต่อที่บทความ
-
25 Sep2008รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 12,448
สมมติ xxx คือแท็กที่เราต้องการ myclass คือคลาสที่เรามีและได้กำหนดไว้แล้ว
เนื้อหาที่เกี่ยวข้อง
-
25 Sep2008มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 23,789
การซ่อนและแสดงข้อมูลในลํกษณะปกติ <script language="javascript">
-
25 Sep2008มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 2 อ่าน 11,712
การซ่อนและแสดงข้อมูลในลํกษณะไสลด์เลื่อนขึ้นหรือเลื่อนลง <script langua
-
กำลังอ่านเนื้อหานี้อยู่25 Sep2008มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 14,482
การซ่อนและแสดงข้อมูลในลํกษณะค่อยๆ แสดงชัดขึ้นและค่อยๆ จากหายไป <script
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ