jQuery hiệu ứng - mờ vào và mờ ra

Bằng cách sử dụng jQuery, bạn có thể thực hiện hiệu ứng mờ vào và mờ ra của các phần tử.

Hiệu ứng minh họa

Nhấp vào đây để ẩn/hiện bảng điều khiển

Một tấc thời gian bằng một tấc vàng, vì vậy, chúng tôi cung cấp cho bạn nội dung học tập nhanh chóng và dễ hiểu.

Tại đây, bạn có thể dễ dàng tìm thấy bất kỳ kiến thức nào bạn cần thông qua một mô hình dễ hiểu và tiện lợi.

Mô hình

jQuery fadeIn()
Minh họa phương thức jQuery fadeIn()
jQuery fadeOut()
Minh họa phương thức jQuery fadeOut()
jQuery fadeToggle()
Minh họa phương thức jQuery fadeToggle()
jQuery fadeTo()
Minh họa phương thức jQuery fadeTo()

Phương thức mờ jQuery

Bằng cách sử dụng jQuery, bạn có thể thực hiện hiệu ứng mờ vào và mờ ra của các phần tử.

jQuery có bốn phương thức mờ sau đây:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Phương thức jQuery fadeIn()

jQuery fadeIn() dùng để mờ vào các phần tử đã ẩn.

Cú pháp:

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

Tham số speed quy định thời gian của hiệu ứng. Nó có thể là các giá trị sau: "slow", "fast" hoặc miliseconds.

Tham số callback Tham số là tên hàm sẽ được thực hiện sau khi hiệu ứng mờ hoàn thành.

Dưới đây là ví dụ minh họa phương thức fadeIn() với các tham số khác nhau:

Mô hình

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

Thử ngay

Phương thức jQuery fadeOut()

jQuery fadeOut() phương thức dùng để mờ ra các phần tử hiển thị.

Cú pháp:

$(selector.fadeOut(speed,callback);

Tham số speed quy định thời gian của hiệu ứng. Nó có thể là các giá trị sau: "slow", "fast" hoặc miliseconds.

Tham số callback Tham số là tên hàm sẽ được thực hiện sau khi hiệu ứng mờ hoàn thành.

Dưới đây là ví dụ minh họa phương thức fadeOut() với các tham số khác nhau:

Mô hình

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

Thử ngay

Phương thức fadeToggle() của jQuery

Phương thức fadeToggle() của jQuery có thể chuyển đổi giữa fadeIn() và fadeOut().

Nếu phần tử đã mờ ra, fadeToggle() sẽ thêm hiệu ứng mờ vào cho phần tử.

Nếu phần tử đã mờ vào, fadeToggle() sẽ thêm hiệu ứng mờ ra cho phần tử.

Cú pháp:

$(selector).fadeToggle(speed,callback);

Tham số speed quy định thời gian của hiệu ứng. Nó có thể là các giá trị sau: "slow", "fast" hoặc miliseconds.

Tham số callback Tham số là tên hàm sẽ được thực hiện sau khi hiệu ứng mờ hoàn thành.

Dưới đây là ví dụ minh họa phương thức fadeToggle() với các tham số khác nhau:

Mô hình

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

Thử ngay

Phương thức fadeTo() của jQuery

Phương thức fadeTo() của jQuery cho phép chuyển đổi từ màu sáng sang màu tối dần với độ mờ cho trước (giá trị từ 0 đến 1).

Cú pháp:

$(selector).fadeTo(speed,opacity,callback);

Tham số bắt buộc speed quy định thời gian của hiệu ứng. Nó có thể là các giá trị sau: "slow", "fast" hoặc miliseconds.

Tham số bắt buộc opacity trong phương thức fadeTo() sẽ thiết lập hiệu ứng mờ vào/mờ ra với độ mờ cho trước (giá trị từ 0 đến 1).

Tham số callback là tên hàm sẽ được thực hiện sau khi hàm hoàn thành.

Dưới đây là ví dụ minh họa phương thức fadeTo() với các tham số khác nhau:

Mô hình

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

Thử ngay

Hướng dẫn hiệu ứng jQuery

Để xem toàn diện các hiệu ứng của jQuery, hãy truy cập trang web của chúng tôi Hướng dẫn hiệu ứng jQuery。