วิธี fadeIn() ใน jQuery ใช้เพื่อเปลี่ยนความทึบสำหรับองค์ประกอบที่เลือกจากซ่อนเป็นมองเห็นได้
ไวยากรณ์
ไวยากรณ์มีดังนี้ −
$(selector).fadeIn(speed,easing,callback)
ตัวอย่าง
ด้านบน ความเร็วคือความเร็วของเอฟเฟกต์สีซีดจาง การค่อยๆ เปลี่ยนอาจเป็นแบบสวิงหรือเชิงเส้นสำหรับความเร็วที่จุดต่างๆ ของแอนิเมชัน การเรียกกลับเป็นฟังก์ชันที่จะดำเนินการหลังจากเมธอดเสร็จสิ้น
ให้เราดูตัวอย่างการใช้เมธอด jQuery fadeIn() -
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ปุ่ม "Fade out" ด้านบนเพื่อทำให้ข้อความจางลง -
คลิกที่ปุ่ม "Fade in" ด้านบนตอนนี้เพื่อค่อยๆ ปรากฏ (แสดง) ข้อความ:
