มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1
การซ่อนและแสดงข้อมูลในลํกษณะปกติ
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อน
โค้ดประกอบด้านบน
14 Mar 09
สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 1798
18 Oct 08
การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 1740
25 Sep 08
เริ่มต้นกับ jquery อ่าน 1710
01 Feb 09
สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 1624
30 Dec 08
การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 1604
25 Sep 08
การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 1602
04 Nov 08
การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 1549
16 Nov 08
jQuery กับการจำกัดการเลือก checkbox อ่าน 1514
26 Feb 09
การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery อ่าน 1511
26 Mar 09
แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 1492
17 Aug 09
สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 1457
22 Nov 08
ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 1449
25 Sep 08
ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 1423
25 Sep 08
jquery สคริปแรกของคุณ อ่าน 1420
02 Apr 09
สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 1412
<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>

