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

25 September 2008 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

jquery effect

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery effect

การซ่อนและแสดงข้อมูลในลํกษณะไสลด์เลื่อนขึ้นหรือเลื่อนลง

<script language="javascript">  
$(function(){   
	 $("p").slideDown(); // แสดงแท็ก p ที่ซ่อนอยู่แบบไสลด์เลือนลง
	 $("p").slideUp(); // ซ่อนแท็ก p แบบไสลด์เลื่อนขึ้น
	 // นอกจากนี้เรายังสามารถกำหนดความเร็วของ effects
	 // ได้อีก 3 ระดับ คือ 
	 $("p").slideDown("slow"); // แสดงข้อมูลแบบช้า
	 $("p").slideDown("normal"); // แสดงข้อมูลแบบปกติ
	 $("p").slideDown("fast"); // แสดงข้อมูลแบบเร็ว
	 // ซึ่งความเร็วทั้ง 3 ระดับนั้นสามารถใช้กับการซ่อน
	 // ข้อมูลได้เช่น โดยเปลี่ยนจาก slideDown เป็น slideUp		 			 			 
});
</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").slideDown("slow");   
                return false;
        });    
        $("a#demo2").click(function(){    
                $("div#show_demo").slideUp("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="javascript:void(0)" id="demo">คลิกเพื่อแสดงข้อความที่ซ่อนแบบไสลด์เลื่อนขึ้น</a><br />  
<div id="show_demo">  
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่    
</div>  
<a href="javascript:void(0)" id="demo2">คลิกเพื่อซ่อนข้อความแบบไสลด์เลื่อนลง</a><br />
</body>
</html>

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ