PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

25 September 2008 By


การซ่อนและแสดงข้อมูลในลํกษณะค่อยๆ แสดงชัดขึ้นและค่อยๆ จากหายไป
<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>

Tags:: jquery effect





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