Cách dùng jQuery để ẩn hiện phần tử HTML DOM có kèm hiệu ứng

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Cách dùng jQuery để ẩn hiện phần tử HTML DOM có kèm hiệu ứng

Trong jQuery có các phương thức như hide(), show(), toggle(), fadeToggle(), slideToggle(). Những phương thức này có chức năng ẩn hiện phần tử có kèm hiệu ứng.

Hiệu ứng Hide/Show
jQuery có một số hiệu ứng động rất dễ để sử dụng. Trong đó, phương thức hide() và show() dùng để ẩn đi hay hiển thị các phần tử chọn, tương tự toggle() sẽ tương đương với show() nếu phần tử đang ẩn, và tương đương với hide() nếu phần tử đang hiển thị.
Mã:
<button id="vidu1">Bấm vào đây
    <strong id="pvidu1">Sử dụng toggle()</strong>
</button>
<script>
    $("#vidu1").click(function() {
       $("#pvidu1").toggle();
    });
</script>

Phương thức show(), hide(), toggle() có thể chứa tham số thứ nhất để chỉ ra thời gian hoàn thành hiệu ứng (tính bằng mili giây).

Ví dụ hiệu ứng xảy ra trong 1s
Mã:
<button id="vidu2">Bấm vào đây
    <strong id="pvidu2">Sử dụng toggle(1000)</strong>
</button>

<script>
    $("#vidu2").click(function() {
        $("#pvidu2").toggle(1000);
    });
</script>

Phương thức show(), hide(), toggle() còn có thể chứa hàm callback, là hàm sẽ thi hành sau khi hiệu ứng hoàn thành.

Ví dụ sau sẽ gọi một hàm callback sau khi hiệu ứng hoàn thành.
Mã:
<button id="vidu3">Bấm vào đây
    <strong id="pvidu3">Sử dụng toggle(1000)</strong>
</button>

<script>
    $("#vidu3").click(function() {
        $("#pvidu3").toggle(500, function() {
            $("#pvidu3").toggle(500);
        });
    });
</script>

Hiệu ứng mờ dần
Tương tự như ba hàm show(), hide(), toggle() cũng có ba hàm với chức năng tương tự nhưng đi kèm hiệu ứng phai dần đó là fadeIn(), fadeOut() và fadeToggle()

Tương tự nó cũng có thể có hai tham số tốc độ và hàm callback, ví dụ:
Mã:
<button id="vidu4">Bấm vào đây
    <strong id="pvidu4">Sử dụng fadeToggle(1000)</strong>
</button>

<script>
    $("#vidu4").click(function() {
        $("#pvidu4").fadeToggle(1000, function() {
            $("#pvidu4").fadeToggle(1000);
        });
    });
</script>

Ngoài ra còn có phương thức fadeTo(speed, opacity) để chạy hiệu ứng thiết lập opacity về giá trị chỉ ra. Ví dụ:
Mã:
$("div").fadeTo(1500, 0.7);

Hiệu ứng trượt phần tử
Hiệu ứng xuất ẩn phần tử slideUp, xuất hiện phần tử slideDown là hiệu ứng giống với hide(), show() nhưng kèm thêm trượt phần tử. Tương tự có slideToggle() để chuyển trạng thái qua lại giữa hai phương thức này
Mã:
<button id="vidu5">Bấm vào đây
    <strong id="pvidu5">Sử dụng slideUp(1000)</strong>
</button>

<script>
    $("#vidu5").click(function() {
        $("#pvidu5").slideToggle(1000, function() {
            //... code in callback
        });
    });
</script>

Chúc các bạn thành công.


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom