jQuery fadeIn() เมธอดพร้อมตัวอย่าง

บทนำ

เมธอด fadeIn() ใน jQuery ใช้เปลี่ยนความทึบแสง (opacity) ขององค์ประกอบที่เลือก จากสถานะซ่อน (hidden) ให้กลายเป็นมองเห็น (visible) ด้วยเอฟเฟกต์การจางเข้ามา (fade in)

ไวยากรณ์ (Syntax)

$(selector).fadeIn(speed, easing, callback)

• speed - ความเร็วของเอฟเฟกต์ ("slow", "fast" หรือ มิลลิวินาที)
• easing - ฟังก์ชันการเร่งความเร็ว ("swing" หรือ "linear")
• callback - ฟังก์ชันที่จะทำงานหลังจากเอฟเฟกต์เสร็จสิ้น

ตัวอย่าง: การใช้ fadeIn() และ fadeOut() สลับกัน

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".btnout").click(function(){
                $("div").fadeOut();
            });
            $(".btnin").click(function(){
                $("div").fadeIn();
            });
        });
    </script>
</head>
<body>
    <h2>Java</h2>
    <div>
        <p>Java released in 1994. The current version is Java 13.</p>
    </div>
    <button class="btnout">Fade out</button>
    <button class="btnin">Fade in</button>
    <p>Click on above buttons to fade out and fade in text.</p>
</body>
</html>

ผลลัพธ์

หน้าเว็บจะแสดงข้อความเกี่ยวกับ Java พร้อมปุ่มสองปุ่ม:

• กด "Fade out" - ข้อความจะจางหายไปจนหายไปสิ้นสุด
• กด "Fade in" - ข้อความจะจางเข้ามาจากสถานะซ่อนจนมองเห็นชัด

คลิกปุ่ม "Fade out" เพื่อจางข้อความออก:

คลิกปุ่ม "Fade in" ตอนนี้เพื่อจางข้อความเข้ามา (แสดง):

สรุป

เมธอด fadeIn() และ fadeOut() ให้เอฟเฟกต์การแสดง/ซ่อนที่นุ่มนวลและดูเป็นมืออาชีพ เหมาะสำหรับ UI ที่ต้องการประสบการณ์ผู้ใช้ที่ดี สามารถร่วมใช้กับ fadeToggle() สำหรับการสลับสถานะได้