Phương thức jQuery fadeIn()

Phương thức fadeIn() trong jQuery được sử dụng để thay đổi độ mờ (opacity) của các phần tử được chọn, từ ẩn sang hiển thị.

Cú pháp

Cú pháp như sau:

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

Trong đó, speed là tốc độ hiệu ứng mờ. easing có thể là swing hoặc linear cho tốc độ tại các điểm hoạt ảnh khác nhau. callback là hàm được thực thi sau khi phương thức hoàn thành.

Ví dụ

Hãy xem ví dụ sau để triển khai phương thức 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>

Đầu ra

Chương trình sẽ cho ra kết quả như sau:

Nhấn nút "Fade out" để làm mờ văn bản:

Nhấn nút "Fade in" để hiển thị lại văn bản: