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

1.136 lượt xem 
 
Thể loại: JQuery, Thiết kế Web 

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

avatar
1000
  Subscribe  
Notify of