[JQuery] Phần 5: Hiệu ứng ẩn và hiện — hide() và show()

Cập nhật lần cuối: 30/03/2019 lúc 14:35:13

jQuery hide() và show()

Hai phương thức hide() và show() trong jQuery dùng để ẩn và hiện các phần văn bản. Ví dụ sau mô tả 2 nút nhấn để ẩn và hiện 1 đoạn văn bản.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>
<p>Nếu nhấn nút "Ẩn" thì đoạn văn bản sẽ biến mất --- dammio.com</p>
<button id="hide">Ẩn</button>
<button id="show">Hiện</button>
</body>
</html>

Cú pháp sử dụng:

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

Tham số tùy chọn speed dùng để định nghĩa tốc độ của hiệu ứng ẩn/hiện, với các giá trị như “slow”, “fast” hay theo mili giây. Tham số tùy chọn callback là 1 hàm sẽ được thực thi sau khi hiệu ứng hide() hay show() hoàn thành. Ví dụ sau mô tả 1 nút nhấn ẩn văn bản sau 1s (1000 mili giây).

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000);
    });
});
</script>
</head>
<body>
<button>Ẩn nội dung sau 1s</button>
<p>Đoạn văn bản 1 --- dammio.com</p>
<p>Đoạn văn bản 2 --- dammio.com</p>
</body>
</html>

Nếu bạn muốn ẩn nội dung khi tải trang thì đơn giản thêm dòng $(“p”).hide(); trước hai hàm nhấn nút trong JQuery như sau:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("p").hide(); // thêm dòng này để nội dung trong thẻ p ẩn lúc đầu
	
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>
<p>Nếu nhấn nút "Ẩn" thì đoạn văn bản sẽ biến mất --- dammio.com</p>
<button id="hide">Ẩn</button>
<button id="show">Hiện</button>
</body>
</html>

jQuery toggle()

Với jQuery, bạn có thể chuyển trạng thái giữa 2 phương thức hide() và show() bằng phương thức toggle(). Ví dụ sau mô tả 1 nút nhấn với hiệu ứng ẩn/hiện đoạn văn bản thông qua phương thức toggle().

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});
</script>
</head>
<body>
<button>Nhấn nút để ẩn/hiện đoạn văn bản</button>
<p>Đoạn văn bản 1 --- dammio.com</p>
<p>Đoạn văn bản 2 --- dammio.com</p>
</body>
</html>

Cú pháp:

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

Tham số tùy chọn speed để chỉnh tốc độ hiển thị với các giá trị như “slow”, “fast” hay mili giây. Tham số tùy chọn callback là 1 hàm được thực thi khi toogle() hoàn thành.

Liên quan: [JQuery] Phần 3: Các hàm chọn jQuery (jQuery Selectors)

Kêt luận: Như vậy trong bài này, bạn đã học được 3 phương thức quan trọng hide(), show(), toggle() để ẩn và hiện nội dung trong jQuery.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [JQuery] Phần 5: Hiệu ứng ẩn và hiện — hide() và show(). https://www.dammio.com/2017/04/08/jquery-phan-5-hieu-ung-an-va-hien-hide-va-show.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[JQuery] Phần 5: Hiệu ứng ẩn và hiện — hide() và show()}, year = {2017}, url = {https://www.dammio.com/2017/04/08/jquery-phan-5-hieu-ung-an-va-hien-hide-va-show}, urldate = {2024-12-05} }

Kết nối

jQuery hide() và show()

jQuery toggle()