Người Viết : ViKiMi Editor

Hiệu ứng Fading tạo nên xử lý làm mờ phần tử nhiều thú vị khi lựa chọn hiển thị HTML
Khi thiết kế những phần tử có khả năng ẩn hoặc hiện sử dụng jQuery chắc hẳn các bạn nghĩ ngay tới sử dụng các phương thức thông thường đó là show / hide. Tuy nhiên, bên cạnh đó chúng ta vẫn có nhiều phương thức khác để lựa chọn. Một trong những cách để có thể làm được một hiệu ứng ẩn / hiện đẹp mắt đó là tạo độ mờ kết hợp cùng hiệu ứng ẩn / hiện.
Thật đơn giản vì chúng ta chỉ cần tạo độ mờ + với hiệu ứng ẩn / hiện.
Như vậy việc ẩn / hiện các phần tử HTML đã trở nên phong phú hơn.
Đây cũng là nội dung mà mà chúng ta sẽ đề cập tới về hiệu ứng mới sẽ sử dụng với thư viện jQuery.
Thư viện jQuery cung cấp các hiệu ứng có thể làm mờ + ( ẩn / hiện ) phần tử HTML là :
+ fadeIn()
+ fadeOut()
+ fadeToggle()
+ fadeTo()
Với 4 phương thức này bạn có thể thêm phần phong phú cho giao diện Website, nhưng bản chất chúng ta sẽ thấy nó vẫn có chung một tác dụng giống như phương thức show / hide / toggle/
CÁCH THỨC LÀM VIỆC CỦA 4 PHƯƠNG THỨC TRÊN :
A ] Phương thức FadeIn
Phương thức này có tác dụng hiển thị phần tử HTML + độ mờ phù hợp
Cú pháp :
$(selector).fadeIn( speed, callback );
+ Tham số speed ( Tuỳ chọn ) : chỉ định tốc độ của hiệu ứng “slow”, “fast”, or milliseconds.
+ Tham số callback ( Tuỳ chọn ) : chỉ định một ( phương thức gọi lại ) được thực thi sau khi quá trình ( hiển thị + độ mờ ) hoàn tất.
Example ::
$(document).ready(function(){
$(“button”).click(function(){
/* Hiển thị + Mờ #div1 */
$(“#div1”).fadeIn();
/* Hiển thị + Mờ #div2 tốc độ slow */
$(“#div2”).fadeIn(“slow”);
/* Hiển thị + Mờ #div3 tốc độ 3000 milliseconds */
$(“#div3”).fadeIn(3000);
});
});
B ] Phương thức FadeOut
Phương thức này có tác dụng Ẩn phần tử HTML + độ mờ phù hợp
Cú pháp :
$(selector).fadeOut ( speed, callback );
+ Tham số speed ( Tuỳ chọn ) : chỉ định tốc độ của hiệu ứng “slow”, “fast”, or milliseconds.
+ Tham số callback ( Tuỳ chọn ) : chỉ định một ( phương thức gọi lại ) được thực thi sau khi quá trình ( Ẩn + mờ dần ) hoàn tất.
Example ::
$(document).ready(function(){
$(“button”).click(function(){
/* Ẩn + Mờ #div1 */
$(“#div1”).fadeOut();
/* Ẩn + Mờ #div2 tốc độ slow */
$(“#div2”).fadeOut(“slow”);
/* Ẩn + Mờ #div3 tốc độ 3000 milliseconds */
$(“#div3”).fadeOut(3000);
});
});
C ] Phương thức FadeToggle
Phương thức này là sự chuyển đổi giữa FadeIn và FadeOut.
Điều này có nghĩa là :
– Nếu các phần tử HTML đang được HIỂN THỊ, Thực hiện gọi Phương thức fadeToggle() >> sẽ tạo hiệu ứng làm ( Ẩn + Mờ ) chúng đi.
– Nếu các phần tử HTML đang được ẨN, Thực hiện gọi Phương thức fadeToggle() >> sẽ tạo hiệu ứng làm ( Hiển Thị + Mờ ) chúng lên.
Cú pháp :
$(selector).fadeToggle( speed, callback );
+ Tham số speed ( Tuỳ chọn ) : chỉ định tốc độ của hiệu ứng “slow”, “fast”, or milliseconds.
+ Tham số callback ( Tuỳ chọn ) : chỉ định một ( phương thức gọi lại ) được thực thi sau khi quá trình mờ dần hoàn tất.
Example ::
$(document).ready(function(){
$(“button”).click(function(){
/* Tạo hiệu ứng Toggle cho #div1 */
$(“#div1”).fadeToggle();
/* Tạo hiệu ứng Toggle cho #div2 + tốc dộ slow */
$(“#div2”).fadeToggle(“slow”);
/* Tạo hiệu ứng Toggle cho #div3 + tốc dộ 6000 milliseconds */
$(“#div3”).fadeToggle(6000);
});
});
D ] Phương thức FadeTo
Phương thức này chỉ đơn thuần là cho phép tạo ra hiệu ứng làm mờ đi phần tử theo độ mờ nhất định (Giá trị từ 0 đến 1).
Phương thức này linh hoạt hơn các phương thức ở phía trên là bạn có thể chủ động tạo độ mờ cho phần tử HTML.
Và nếu so sánh với CSS thì có vẻ như phương thức này tương đồng với Opacity trong CSS. Vì vậy, có thể hiểu rằng dựa vào phương thức này chúng ta có thể dễ dàng thay đổi độ mờ phần tử nhờ những dòng lập trình đơn giản và linh động.
Cú pháp :
$(selector).fadeTo( speed, opacity, callback );
+ Tham số speed ( Tuỳ chọn ) : chỉ định tốc độ của hiệu ứng “slow”, “fast”, or milliseconds.
+ Tham số Opacity ( Bắt buộc ) : chỉ định độ mờ dần của phần tử HTML theo độ mờ nhất định ( Giá trị từ 0 đến 1 ).
+ Tham số callback ( Tuỳ chọn ) : chỉ định một ( phương thức gọi lại ) được thực thi sau khi quá trình mờ dần hoàn tất.
Example ::
$(document).ready(function(){
$(“button”).click(function(){
/* Tạo độ mờ cho #div1 là 0.25 */
$(“#div1”).fadeTo(“slow”, 0.25);
/* Tạo độ mờ cho #div2 là 0.5 */
$(“#div2”).fadeTo(“slow”, 0.5);
/* Tạo độ mờ cho #div3 là 0.75 */
$(“#div3”).fadeTo(“slow”, 0.75);
});
});
Như vậy, chúng ta đã thấy rõ cách kết hợp Ẩn / Hiện + Làm Mờ phần tử HTML. Thiết kế này đem lại sư phong phú + phù hợp cho người dùng hơn. Do đó các Website có thể mang diện mạo mới, sẽ bớt đi sự khô cứng khi lập trình. Nếu bạn so sánh và kết hợp các ngôn ngữ trong quá trình lập trình thì điều đó sẽ còn tạo ra các hiệu ứng thú vị hơn.
+ Tất nhiên, mục tiêu chính là đem lại sự thoải mái cho Website