PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

25 September 2008 By


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

Tags:: effect jquery





URL สำหรับอ้างอิง