มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3
25 September 2008
การซ่อนและแสดงข้อมูลในลํกษณะค่อยๆ แสดงชัดขึ้นและค่อยๆ จากหายไป
ดูตัวอย่างประกอบด้านล่าง
คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น
โค้ดประกอบด้านบน
<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="#" id="demo">คลิกเพื่อแสดงข้อความที่ซ่อนแบบค่อยๆ แสดงชัดขึ้น</a><br />
<div id="show_demo">
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่
</div>
<a href="#" id="demo2">คลิกเพื่อซ่อนข้อความแบบค่อยๆ จากหายไป</a><br />
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 2320 09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 1793 07 Jun 09 กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย อ่าน 5565 29 Oct 08 สร้างปุ่มแบ่งหน้าให้ดูดีด้วย css อย่างง่าย อ่าน 6282 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 4074 29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 2711 25 Sep 08 ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic อ่าน 5115 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 858 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 2354 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3108 25 Sep 08 เพิ่มข้อความหน้าหรือหลังตัวเลขหรือข้อความด้วยฟังก์ชัน str_pad อ่าน 1346 10 Sep 10 ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่ อ่าน 5610 29 Dec 10 เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์ อ่าน 4011 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4605 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 4551 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 3920 25 Sep 08 ไม่ให้ทำการ คัดลอก ( Copy ) และ วาง ( Paste ) อ่าน 2515 16 Aug 09 jQuery UI คือ อะไร อ่าน 4303 19 Oct 10 เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์ อ่าน 2680 04 Oct 08 SQL คืออะไร อ่าน 7367