Hiệu Ứng Trong jQuery

Trong phần này chúng ta sẽ tìm hiểu cách tạo ra một số hiệu ứng phổ biến sử dụng thư viện jQuery.

hide()

Phương thức hide() được sử dụng để ẩn phần tử bằng cách gán giá trị cho thuộc tính CSS display: none; cho phần tử.

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

Chạy

Bạn cũng có thể quy định việc ẩn phần tử diễn ra trong bao lâu bằng việc thêm một đối số khi gọi phương thức. Ở ví dụ dưới việc ẩn phần tử sẽ được diễn ra trong vòng 1.5 giây (1500 minisecond = 1.5 giây).

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

Chạy

Khác vởi remove() khi sử dụng hide() thì phần tử sẽ không bị xoá hẳn khỏi trang mà chỉ ẩn đi và bạn có thể sử dung phương thức show() dưới đây để hiển thị lại phần tử này.

show()

Phương thức show() dùng để hiển thị các phần tử ẩn trên trang. Ở ví dụ dưới chúng ta sử dụng phương thức này để hiển thị phần tử p#hidden đang ẩn do có thuộc tính CSS display: none (xem tab CSS):

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

Chạy

Tương tự như hide() bạn cũng có thể quy định việc hiển thị phần tử diễn ra trong bao lâu bằng việc thêm đối số khi gọi phương thức này.

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

Chạy

toggle()

Phương thức toggle() dùng để chuyển đổi luân phiên một giữa show()hide() tuỳ vào trạng thái hiển thị của phần tử.

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

Chạy

jQuery Cơ Bản


Thảo Luận


Chưa có câu hỏi nào cho bài hướng dẫn này
Đặt câu hỏi

Mời Bạn Bè

Gửi email mời bạn bè tham gia khóa học

Viết Cùng Tác Giả

Bạn biết về chủ đề này và muốn tham gia viết cùng tác giả?