มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1

การซ่อนและแสดงข้อมูลในลํกษณะปกติ
<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>

บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 1773 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 1721 25 Sep 08 เริ่มต้นกับ jquery อ่าน 1685 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 1604 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 1585 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 1583 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 1538 16 Nov 08 jQuery กับการจำกัดการเลือก checkbox อ่าน 1499 26 Feb 09 การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery อ่าน 1494 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 1476 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 1444 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 1426 25 Sep 08 ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 1407 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 1398 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 1396
จำนวนผู้เยี่ยมชม 84567 คน 2010 © Copyright ninenik.com. All rights reserved.