มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1
25 September 2008
การซ่อนและแสดงข้อมูลในลํกษณะปกติ
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อน
โค้ดประกอบด้านบน
<script language="javascript">
$(function(){
$("p").show(); // แสดงแท็ก p ที่ซ่อนอยู่
$("p").hide(); // ซ่อนแท็ก p
// นอกจากนี้เรายังสามารถกำหนดความเร็วของ effects
// ได้อีก 3 ระดับ คือ
$("p").show("slow"); // แสดงข้อมูลแบบช้า
$("p").show("normal"); // แสดงข้อมูลแบบปกติ
$("p").show("fast"); // แสดงข้อมูลแบบเร็ว
// ซึ่งความเร็วทั้ง 3 ระดับนั้นสามารถใช้กับการซ่อน
// ข้อมูลได้เช่น โดยเปลี่ยนจาก show เป็น hide
});
</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").show("slow");
return false;
});
$("a#demo2").click(function(){
$("div#show_demo").hide("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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
23 Jun 11 การสร้าง active เมนู อย่างง่าย ด้วย css และ php อ่าน 1550 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 4175 01 Feb 10 การใช้งาน method delay() ใน jQuery 1.4 อ่าน 2718 29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 2711 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 4636 25 Sep 08 Margins and Padding การจัดการพื้นที่ระหว่างสิ่งต่างๆ อ่าน 3409 22 Mar 09 javascript หาความกว้างและความสูงของหน้าเพจได้ด้วยฟังก์ชันง่ายๆ อ่าน 1717 25 Sep 08 การใช้งาน CSS ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML อ่าน 6800 25 Sep 08 เพิ่มข้อความหน้าหรือหลังตัวเลขหรือข้อความด้วยฟังก์ชัน str_pad อ่าน 1346 30 Oct 10 การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด อ่าน 5083 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2266 15 Oct 08 สร้าง box แบบสวยงาม ด้วย CSS อ่าน 7550 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 3086 04 Aug 09 การส่งข้อมูลแบบ post ด้วย ajax ของ jquery อ่าน 8730 03 Dec 10 ทบทวน การขึ้น บรรทัดใหม่ ใน textarea ด้วย Special Characters in HTML อ่าน 1963 30 Oct 09 ฟังก์ชัน PHP แปลงตัวเลขอาราบิก เป็น ตัวเลขไทย อย่างง่าย อ่าน 1152 31 Mar 09 ดึงข้อมูลจากฐานข้อมูลเป็น excel ด้วย php รองรับภาษาไทย อ่าน 5588 16 Sep 10 เพิ่มความสะดวก การ insert update delete ข้อมูล ของ mysql ด้วย php function อ่าน 7130 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 738 18 Aug 10 ใช้ php ดึงรูปภาพ จากโฟลเดอร์ มาแสดง พร้อม เทคนิค แบ่งหน้า อ่าน 4487