มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 2
25 September 2008
การซ่อนและแสดงข้อมูลในลํกษณะไสลด์เลื่อนขึ้นหรือเลื่อนลง
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อนแบบไสลด์เลื่อนขึ้น
โค้ดประกอบด้านบน
<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>
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อนแบบไสลด์เลื่อนขึ้น
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
คลิกเพื่อซ่อนข้อความแบบไสลด์เลื่อนลงโค้ดประกอบด้านบน
<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="#" id="demo">คลิกเพื่อแสดงข้อความที่ซ่อนแบบไสลด์เลื่อนขึ้น</a><br />
<div id="show_demo">
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
</div>
<a href="#" id="demo2">คลิกเพื่อซ่อนข้อความแบบไสลด์เลื่อนลง</a><br />
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
25 Sep 08 Upload รูปภาพ หรือไฟล์ด้วย ฟังก์ชั่น ใช้ง่าย อ่าน 4705 23 Nov 09 ทำการ cache หน้าเว็บไซต์ด้วย php class อย่างง่าย อ่าน 2099 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 1307 04 Dec 09 จัดการ Directory สร้าง ลบ เปลี่ยนชื่อ กำหนด permission ผ่าน FTP function ด้วย PHP อ่าน 1408 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4891 15 Nov 08 สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย อ่าน 6993 24 Aug 10 ประยุกต์ ใช้รายการ จากฐานข้อมูล สร้างปฏิทินกิจกรรม ด้วย fullcalendar และ jQuery อ่าน 3990 08 Jun 10 ป้องกัน spam ด้วย captcha คำถาม ทางคณิตศาสตร์ อย่างง่าย อ่าน 1667 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3129 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 6166 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 3187 09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 1810 13 Oct 10 สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map อ่าน 2031 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3103 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 8967 22 Jan 11 การอัพเดท สถานะ facebook อัตโนมัติ ผ่านทางอีเมลล์ อ่าน 1925 25 Sep 08 ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 3999 15 Nov 09 สร้างลิ้งค์เมนู 2 ภาษา กรณี ไทย อังกฤษ ด้วย php อย่างง่าย อ่าน 1860 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4512 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attribute อ่าน 2750