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

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
jquery effect

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

ดูแล้ว 14,482 ครั้ง


การซ่อนและแสดงข้อมูลในลํกษณะค่อยๆ แสดงชัดขึ้นและค่อยๆ จากหายไป
<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="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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: effect jquery







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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ