Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng fadeIn() và fadeOut() trong jQuery
Trong bài này chúng ta sẽ tìm hiểu hàm fadeIn và fadeOut trong jQuery, hai hàm này dùng để hiển thị hoặc ẩn các thẻ HTML với hiệu ứng mờ dần rất đẹp mắt.
Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ dần rất tự nhiên, còn show và hide thì sẽ bị kéo về một góc. Nhưng xét về công dụng thì cả hai đều là những hiệu ứng ẩn / hiện các đối tượng html.
1. Cú pháp fadeIn và fadeOut jQuery
Trước tiên hãy tham khảo cú pháp của hai hàm này đã nhé.
$(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,easing,callback)
Trong đó:
Bài viết này được đăng tại [free tuts .net]
speedlà tốc độ ẩn hoặc hiện, đơn vị trính là miliseconds.callbacklà hàm sẽ được gọi ngay sau khi hiệu ứng hoàn thành.easinglà tham số của hàm fadeOut, nó có hai giá trị.swing là hiệu ứng sẽ xảy ra tốc độ chậm ở thời điểm đầu và cuối. linear là hiển thị tốc độ đều ở mọi thời điểm. Tham số này là tùy chọn, mặc dù nó ở vị trí thứ 2 nhưng bạn có thể bỏ qua nó bằng cách sử dụng tham số callback ở vị trí 2.
Ví dụ: Áp dụng fadeIn và fadeOut vào thẻ HTML có id là result.
$('#result').fadeIn();
$('#result').fadeOut();
// Có tốc độ
$('#result').fadeIn("slow");
$('#result').fadeOut(3000);
// Có callback function
$('#result').fadeIn(1000, function(){
alert("Done");
});
$('#result').fadeOut(1000, function(){
alert("Done");
});2. Ví dụ kết hợp fadeIn và fadeOut jQuery
Ví dụ 1: Viết chương trình khi click vào button thì ẩn và hiện các thẻ p.
$(document).ready(function(){
// Fadeing hiển thị thẻ p
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading ẩn thẻ p
$(".in-btn").click(function(){
$("p").fadeIn();
});
});Ví dụ 2: Vẫn là ví dụ như trên, nhưng hãy thảo thêm vài hiệu ứng kết hợp với tham số speed.
$(document).ready(function(){
// fadeOut với các speed khác nhau
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading với các tốc độ khác nhau
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});Như bạn thấy, mặc dù hai hiệu ứng này tương tự như hàm show và hide. Tuy nhiên, nếu nhìn kĩ thì bạn sẽ thấy nó ẩn và hiện nhẹ nhàng hơn nhiều.
Ví dụ 3: Bây giờ ta sẽ làm thêm ví dụ có áp dụng callback function nhé.
$(document).ready(function(){
// Hiển thị thông báo khi hiệu ứng fadeout hoàn thành
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
alert("fade-out hoàn thành.");
});
});
// Hiển thị thông báo khi hiệu ứng fadein hoàn thành
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
alert("fade-in hoàn thành.");
});
});
});Như vậy là chúng ta đã tìm hiểu xong cách sử dụng hàm fadeIn và fadeOut trong jQuery để tạo các hiệu ứng ẩn / hiện các thẻ HTML.
