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

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

Phương thức fadeIn() trong JQuery dùng để thực hiện css display block và xuất hiện từ từ một phần tử HTML theo 1 khoảng thời gian nhất định, 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 fadeIn() trong JQuery

Phương thức fadeIn() trong JQuery dùng để thực hiện css display block và xuất hiện từ từ một phần tử HTML theo 1 khoảng thời gian nhất định.

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

bochon.fadeIn();

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

Thời gian mặc định là 400ms.

bochon.fadeIn(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 200ms), slow (chậm 600ms).

bochon.fadeIn(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 200ms), slow (chậm 600ms).

hamcon: Hàm con dùng để xử lý sự kiện sau khi hiện.

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

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

Không cần truyền tham số vào phương thức, mặc định thời gian thực hiện từ trong suốt đến làm mờ rồi hiện ra nguyên mẫu của phần tử HTML là 400ms:

<!--Ẩn Hiện phần tử HTML có id là hienid-->
<p id="hienid">Nội dung trong ID</p>
<button id="nutanid">ẨN ID</button>
<button id="nuthienid">HIỆN ID</button>
<p>Click ẨN ID và HIỆN ID để ẩn hiện phần tử HTML có id là hienid</p>

<!--Hiện phần tử HTML có id là hienstyle đã ẩn bằng style -->
<p id="hienstyle" style="display:none">Nội dung ẩn bằng style</p>
<button id="nuthienstyle">HIỆN STYLE</button>
<p>Click HIỆN STYLE để hiện phần tử HTML có id là hienstyle</p>

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

// Hiện phần tử HTML có id là hienid
$('#nuthienid').click(function(e) {
  $('#hienid').fadeIn();		
});

// Hiện phần tử HTML có id là hienstyle đã ẩn bằng style
$('#nuthienstyle').click(function(e) {
  $('#hienstyle').fadeIn();		
});
</script>

Chạy Thử

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

Tham số truyền vào có thể là số giây cụ thể hoặc (slow là chậm tầm 600ms) hoặc (fast là nhanh tầm 200ms), thời gian này dùng để thực hiện từ trong suốt đến làm mờ rồi hiện ra nguyên mẫu của phần tử HTML:

<!--Hiện chậm(slow) phần tử HTML có id là hienid-->
<p id="hienid">Nội dung để hiện chậm(slow)</p>
<button id="nutanid">ẨN ID</button>
<button id="nuthienid">HIỆN SLOW</button>
<p>Click ẨN ID và HIỆN SLOW để ẩn, hiện chậm(slow) phần tử HTML có id là hienid</p>

<!--Hiện phần tử HTML có id là hienstyle đã ẩn bằng style với thời gian là 3 giây (3000)-->
<p id="hienstyle" style="display:none">Nội dung ẩn bằng style và hiện với thời gian là 3 giây</p>
<button id="nuthienstyle">HIỆN STYLE</button>
<p>Click HIỆN STYLE để hiện phần tử HTML có id là hienstyle với thời gian là 3 giây</p>

<!--Hiện nhanh(fast) phần tử HTML có id là hienfast đã ẩn bằng style-->
<p id="hienfast" style="display:none">Nội dung ẩn bằng style được hiện nhanh(fast)</p>
<button id="nuthienfast">HIỆN FAST</button>
<p>Click HIỆN FAST để hiện nhanh(fast) phần tử HTML có id là hienfast</p>

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

// Hiện chậm(slow) phần tử HTML có id là hienid 
$('#nuthienid').click(function(e) {
  $('#hienid').fadeIn("slow");		
});

// Hiện phần tử HTML có id là hienstyle đã ẩn bằng style với thời gian là 3 giây (3000)
$('#nuthienstyle').click(function(e) {
  $('#hienstyle').fadeIn(3000);		
});

// Hiện nhanh(fast) phần tử HTML có id là hienfast đã ẩn bằng style
$('#nuthienfast').click(function(e) {
  $('#hienfast').fadeIn("fast");		
});
</script>

Chạy Thử

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

Tham số thứ 1 truyền vào có thể là số giây cụ thể hoặc (slow là chậm tầm 600ms) hoặc (fast là nhanh tầm 200ms), thời gian này dùng để thực hiện từ trong suốt đến làm mờ rồi hiện ra nguyên mẫu của phần tử HTML, tham số thứ 2 là một hàm con dùng để xử lý sau khi hiện:

<!--Hiện chậm(slow) phần tử HTML có id là hienid-->
<p id="hienid">Nội dung để hiện chậm(slow)</p>
<button id="nutanid">ẨN ID</button>
<button id="nuthienid">HIỆN SLOW</button>
<p>Click ẨN ID và HIỆN SLOW để ẩn, hiện chậm(slow) phần tử HTML có id là hienid</p>

<!--Hiện phần tử HTML có id là hienstyle đã ẩn bằng style với thời gian là 3 giây (3000)-->
<p id="hienstyle" style="display:none">Nội dung ẩn bằng style và hiện với thời gian là 3 giây</p>
<button id="nuthienstyle">HIỆN STYLE</button>
<p>Click HIỆN STYLE để hiện phần tử HTML có id là hienstyle với thời gian là 3 giây</p>

<!--Hiện nhanh(fast) phần tử HTML có id là hienfast đã ẩn bằng style-->
<p id="hienfast" style="display:none">Nội dung ẩn bằng style được hiện nhanh(fast)</p>
<button id="nuthienfast">HIỆN FAST</button>
<p>Click HIỆN FAST để hiện nhanh(fast) phần tử HTML có id là hienfast</p>

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

// Hiện chậm(slow) phần tử HTML có id là hienid 
$('#nuthienid').click(function(e) {
  $('#hienid').fadeIn("slow", function() { 
    alert("Phần tử đã được hiện!"); 
  });				
});

// Hiện phần tử HTML có id là hienstyle đã ẩn bằng style với thời gian là 3 giây (3000)
$('#nuthienstyle').click(function(e) {
  $('#hienstyle').fadeIn(3000, function() { 
    alert("Phần tử đã được hiện!"); 
  });						
});

// Hiện nhanh(fast) phần tử HTML có id là hienfast đã ẩn bằng style
$('#nuthienfast').click(function(e) {
  $('#hienfast').fadeIn("fast", function() { 
    alert("Phần tử đã được hiện!"); 
  });					
});
</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 fadeIn() trong JQuery.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức fadeIn() 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