jQuery Effects - Ẩn và Hiện


Ẩn, Hiển thị, Chuyển đổi, Trang trình bày, Làm mờ và Tạo hoạt ảnh. Ồ!

Nhấp để hiển thị / ẩn bảng điều khiển

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ụ


Trình bày một phương thức jQuery hide () đơn giản.


Một trình diễn ẩn () khác. Cách ẩn các phần của văn bản.


jQuery hide () và show ()

Với jQuery, bạn có thể ẩn và hiển thị các phần tử HTML bằng các phương thức hide()show():

Thí dụ

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Cú pháp:

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

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

Tham số tốc độ tùy chọn chỉ định tốc độ ẩn / hiển thị và 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 hide()hoặc show()phương thức hoàn thành (bạn sẽ tìm hiểu thêm về các hàm gọi lại trong chương sau).

Ví dụ sau minh họa tham số tốc độ với hide():

Thí dụ

$("button").click(function(){
  $("p").hide(1000);
});


jQuery chuyển đổi ()

Bạn cũng có thể chuyển đổi giữa ẩn và hiển thị một phần tử bằng toggle()phương thức này.

Phần tử được hiển thị là phần tử ẩn và phần tử bị ẩn được hiển thị:

Thí dụ

$("button").click(function(){
  $("p").toggle();
});

Cú pháp:

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

Tham số tốc độ tùy chọ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 toggle()hoàn thành.


Bài tập jQuery

Kiểm tra bản thân với các bài tập

Bài tập:

Sử dụng phương thức jQuery để ẩn phần tử <p> khi nó được nhấp vào.

$("p").click(function(){
  $(this).();
});


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 .