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

311 lượt xem

jQuery hide() và show()
Hai phương thức hide()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>

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.

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ình luận Facebook

Để lại bình luận

Be the First to Comment!

Notify of
avatar
1000
wpDiscuz