jQuery ค่อยๆจาง ค่อยๆแสดง ด้วย fadeIn และ fadeOut

สอนเขียน jQuery แสดง effect ค่อยๆจาง ค่อยๆแสดง ด้วยคำสั่ง fadeIn และคำสั่ง fadeOut โดยทั้ง 2 คำสั่งนิยมนำมาใช้สำหรับแสดง และซ่อนข้อมูลแบบมี effect โดยบทความนี้จะแนะนำวิธีการใช้งานทั้ง 2 คำสั่ง โดยมีรายละเอียดดังนี้

ตัวอย่าง jQuery ค่อยๆจาง ค่อยๆแสดง ด้วย fadeIn และ fadeOut

<div id="content">Hello, Devdit</div>
<br/>
<input type="button" value="ค่อยๆ จาง" id="btnFadeOut"> 
<input type="button" value="ค่อยๆ แสดง" id="btnFadeIn">

<script>
    $("#btnFadeOut").click(function(){
        $("#content").fadeOut();
    });
    $("#btnFadeIn").click(function(){
        $("#content").fadeIn();
    });    
</script>

jQuery ค่อยๆจาง ค่อยๆแสดง ด้วย fadeIn และ fadeOut ตัวอย่าง เมื่อผู้ใช้งานกดปุ่ม “ค่อยๆ จาง” จะเรียกใช้คำสั่ง $("#content").fadeOut() คือ div id=content จะค่อยๆ จางหายไปจากหน้าเว็บไซต์ และถ้าผู้ใช้งานกดปุ่ม “ค่อยๆ แสดง” ก็จะเรียกใช้คำสั่ง $("#content").fadeIn() คือ div id=content จะค่อยๆ แสดงขึ้นมาที่หน้าเว็บไซต์