Phương thức fadeOut() trong JQuery

• Bùi Tấn Lực
• 187
• 20/12/2025

Phương thức fadeOut() trong JQuery dùng để làm mờ dần rồi ẩn đi một phần tử HTML theo thời gian mong muốn, chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Phương thức fadeOut() trong JQuery

Phương thức fadeOut() trong JQuery dùng để làm mờ dần rồi ẩn đi một phần tử HTML theo thời gian mong muốn, bạn có thể thêm hàm con xử lý sự kiện sau khi thực hiện làm mờ và ẩn đi.

Cú pháp của Phương thức fadeOut() trong JQuery

bochon.fadeOut();

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

bochon.fadeOut(thoigian);

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

thoigian: Thời gian có thể là số giây hoặc fast (nhanh), slow (chậm) dùng để quy định thời gian làm mờ trước khi thực hiện ẩn đi.

bochon.fadeOut(thoigian,hamcon);

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

thoigian: Thời gian có thể là số giây hoặc fast (nhanh), slow (chậm) dùng để quy định thời gian làm mờ trước khi thực hiện ẩn đi.

hamcon: Hàm con dùng để xử lý sự kiện sau khi làm mờ dần và ẩn đi.

Code Phương thức fadeOut() trong JQuery

Phương thức fadeOut() không tham số trong JQuery

Không cần truyền tham số vào phương thức:

<!--Mờ dần và Ẩn phần tử HTML có id là anid-->
<p id="anid">Nội dung trong ID</p>
<button id="nutanid">MỜ DẦN VÀ ẨN ID</button>
<p>Click MỜ DẦN VÀ ẨN ID để Mờ dần và ẩn phần tử HTML có id là anid</p>

<!--Mờ dần và Ẩn những phần tử HTML có class là classp-->
<p class="classp">Nội dung trong class</p>
<p class="classp">Nội dung trong class</p>
<p class="classp">Nội dung trong class</p>
<button id="nutanclassp">MỜ DẦN VÀ ẨN CLASS</button>
<p>Click MỜ DẦN VÀ ẨN CLASS để Mờ dần và ẩn những phần tử HTML có class là classp</p>

<!--Mờ dần và Ẩn những thẻ P-->
<p>Nội dung trong thẻ P</p>
<p>Nội dung trong thẻ P</p>
<button id="nutanthep">MỜ DẦN VÀ ẨN THẺ P</button>
<p>Click MỜ DẦN VÀ ẨN THẺ P để Mờ dần và ẩn những thẻ P</p>

<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Mờ dần và Ẩn phần tử HTML có id là anid
$('#nutanid').click(function(e) {
  $('#anid').fadeOut();		
});

// Mờ dần và Ẩn những phần tử HTML có class là classp
$('#nutanclassp').click(function(e) {
  $(".classp").fadeOut();		
});

// Mờ dần và Ẩn những thẻ P
$('#nutanthep').click(function(e) {
  $("p").fadeOut();		
});
</script>

Chạy Thử

Phương thức fadeOut() truyền 1 tham số trong JQuery

Tham số truyền vào có thể là số giây hoặc (slow là chậm với 600ms) hoặc (fast là nhanh với 200ms), mặc định là 400ms:

<!--Mờ dần 600ms rồi Ẩn phần tử HTML có id là anslow-->
<p id="anslow">Nội dung được ẩn fadeOut("slow")</p>
<button id="nutanslow">ẨN SLOW</button>
<p>Click ẨN SLOW để Mờ dần 600ms rồi Ẩn phần tử HTML có id là anslow</p>

<!--Mờ dần 200ms rồi Ẩn phần tử HTML có id là anfast-->
<p id="anfast">Nội dung được ẩn fadeOut("fast")</p>
<button id="nutanfast">ẨN FAST</button>
<p>Click ẨN FAST để Mờ dần 200ms rồi Ẩn phần tử HTML có id là anfast</p>

<!--Mờ dần 3 giây(3000) rồi Ẩn phần tử HTML có id là antime-->
<p id="antime">Nội dung được Mờ dần 3 giây(3000) rồi Ẩn</p>
<button id="nutantime">ẨN 3 GIÂY</button>
<p>Click ẨN 3 GIÂY để Mờ dần 3 giây(3000) rồi Ẩn phần tử HTML có id là antime</p>
<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Mờ dần 600ms rồi Ẩn phần tử HTML có id là anslow
$('#nutanslow').click(function(e) {
  $('#anslow').fadeOut("slow");		
});

// Mờ dần 200ms rồi Ẩn phần tử HTML có id là anfast
$('#nutanfast').click(function(e) {
  $('#anfast').fadeOut("fast");		
});

// Mờ dần 3 giây(3000) rồi Ẩn phần tử HTML có id là antime
$('#nutantime').click(function(e) {
  $('#antime').fadeOut(3000);		
});
</script>

Chạy Thử

Phương thức fadeOut() truyền 2 tham số trong JQuery

Tham số thứ 1 truyền vào có thể là số giây hoặc (slow là chậm) hoặc (fast là nhanh), tham số thứ 2 là một hàm con dùng để xử lý sau khi làm mờ dần và ẩn đi:

<!--Mờ dần 600ms rồi Ẩn phần tử HTML có id là anslow-->
<p id="anslow">Nội dung được ẩn fadeOut("slow")</p>
<button id="nutanslow">ẨN SLOW</button>
<p>Click ẨN SLOW để Mờ dần 600ms rồi Ẩn phần tử HTML có id là anslow</p>

<!--Mờ dần 200ms rồi Ẩn phần tử HTML có id là anfast-->
<p id="anfast">Nội dung được ẩn fadeOut("fast")</p>
<button id="nutanfast">ẨN FAST</button>
<p>Click ẨN FAST để Mờ dần 200ms rồi Ẩn phần tử HTML có id là anfast</p>

<!--Mờ dần 3 giây(3000) rồi Ẩn phần tử HTML có id là antime-->
<p id="antime">Nội dung được Mờ dần 3 giây(3000) rồi Ẩn</p>
<button id="nutantime">ẨN 3 GIÂY</button>
<p>Click ẨN 3 GIÂY để Mờ dần 3 giây(3000) rồi Ẩn phần tử HTML có id là antime</p>
<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Mờ dần 600ms rồi Ẩn phần tử HTML có id là anslow
$('#nutanslow').click(function(e) {
  $('#anslow').fadeOut("slow", function() { 
    alert("Phần tử đã được làm mờ dần và ẩn đi!"); 
  });			
});

// Mờ dần 200ms rồi Ẩn phần tử HTML có id là anfast
$('#nutanfast').click(function(e) {
  $('#anfast').fadeOut("fast", function() { 
    alert("Phần tử đã được làm mờ dần và ẩn đi!"); 
  });				
});

// Mờ dần 3 giây(3000) rồi Ẩn phần tử HTML có id là antime
$('#nutantime').click(function(e) {
  $('#antime').fadeOut(3000, function() { 
    alert("Phần tử đã được làm mờ dần và ẩn đi!"); 
  });					
});
</script>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức fadeOut() trong JQuery.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức fadeOut() trong JQuery
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn