jQuery Effects - Fading
Với jQuery, bạn có thể làm mờ các phần tử trong và ngoài tầm nhìn.
Nhấp để làm mờ bảng điều khiển trong / ngoài
Bởi vì thời gian là quý giá, chúng tôi cung cấp việc học nhanh chóng và dễ dàng.
Tại W3Schools, bạn có thể nghiên cứu mọi thứ bạn cần học, ở định dạng dễ tiếp cận và tiện dụng.
Các ví dụ
Thể hiện phương thức jQuery fadeIn ().
Thể hiện phương thức jQuery fadeOut ().
Thể hiện phương thức jQuery fadeToggle ().
Thể hiện phương thức jQuery fadeTo ().
Phương thức làm mờ jQuery
Với jQuery, bạn có thể làm mờ một phần tử trong và ngoài tầm nhìn.
jQuery có các phương thức phai sau:
fadeIn()fadeOut()fadeToggle()fadeTo()
Phương thức jQuery fadeIn ()
Phương thức jQuery fadeIn()được sử dụng để làm mờ một phần tử ẩn.
Cú pháp:
$(selector).fadeIn(speed,callback);
Tham số tốc độ tùy chọn chỉ định thời gian của hiệu ứng. Nó có thể nhận các giá trị sau: "chậm", "nhanh" hoặc mili giây.
Tham số gọi lại tùy chọn là một hàm được thực thi sau khi quá trình mờ hoàn thành.
Ví dụ sau minh họa fadeIn()phương thức với các tham số khác nhau:
Thí dụ
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Phương thức jQuery fadeOut ()
Phương thức jQuery fadeOut()được sử dụng để làm mờ một phần tử hiển thị.
Cú pháp:
$(selector).fadeOut(speed,callback);
Tham số tốc độ tùy chọn chỉ định thời gian của hiệu ứng. Nó có thể nhận các giá trị sau: "chậm", "nhanh" hoặc mili giây.
Tham số gọi lại tùy chọn là một hàm được thực thi sau khi quá trình mờ hoàn thành.
Ví dụ sau minh họa fadeOut()phương thức với các tham số khác nhau:
Thí dụ
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Phương thức jQuery fadeToggle ()
Phương thức jQuery fadeToggle()chuyển đổi giữa các phương thức fadeIn()và fadeOut()
.
Nếu các yếu tố bị mờ đi, fadeToggle()sẽ làm mờ chúng trong.
Nếu các yếu tố được làm mờ trong, fadeToggle()sẽ làm mờ chúng.
Cú pháp:
$(selector).fadeToggle(speed,callback);
Tham số tốc độ tùy chọn chỉ định thời gian của hiệu ứng. Nó có thể nhận các giá trị sau: "chậm", "nhanh" hoặc mili giây.
Tham số gọi lại tùy chọn là một hàm được thực thi sau khi quá trình mờ hoàn thành.
Ví dụ sau minh họa fadeToggle()phương thức với các tham số khác nhau:
Thí dụ
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
Phương thức jQuery fadeTo ()
Phương thức jQuery fadeTo()cho phép mờ dần đến một độ mờ nhất định (giá trị từ 0 đến 1).
Cú pháp:
$(selector).fadeTo(speed,opacity,callback);
Tham số tốc độ cần thiết chỉ định thời gian của hiệu ứng. Nó có thể nhận các giá trị sau: "chậm", "nhanh" hoặc mili giây.
Tham số độ mờ bắt buộc trong fadeTo()phương thức chỉ định độ mờ dần đến độ mờ nhất định (giá trị từ 0 đến 1).
Tham số gọi lại tùy chọn là một hàm được thực thi sau khi hàm hoàn thành.
Ví dụ sau minh họa fadeTo()phương thức với các tham số khác nhau:
Thí dụ
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
Bài tập jQuery
Tham chiếu hiệu ứng jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các hiệu ứng jQuery, vui lòng truy cập Tài liệu tham khảo về hiệu ứng jQuery của chúng tôi .