Cách hiện và ẩn một phần tử (với hiệu ứng trượt) - 07

Cách hiện và ẩn một phần tử (với hiệu ứng trượt) – 07

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML với hiệu ứng trượt

Với hiệu ứng trượt, chúng ta có ba phương thức:

slideDown() – hiện phần tử với hiệu ứng trượt xuống.
slideUp() – ẩn phần tử với hiệu ứng trượt lên.
slideToggle() – thực hiện luân phiên giữa việc hiện và ẩn phần tử với hiệu ứng trượt.

Phương thức slideDown() và phương thức slideUp()

Phương thức slideDown() dùng để hiện một phần tử HTML với hiệu ứng trượt xuống.

Phương thức slideUp() dùng để ẩn một phần tử HTML với hiệu ứng trượt lên.

Cú pháp:

$(selector).slideDown(time, callback);

$(selector).slideUp(time, callback);

Trong đó:

Tham số time là khoảng thời gian của việc thực thi hiện/ẩn phần tử. Giá trị của tham số time có thể là:
- “slow” khoảng thời gian tương đối dài.
- “fast” khoảng thời gian tương đối ngắn.
- milliseconds (Ví dụ: 3000, 9000). Lưu ý: 1000 milliseconds = 1 giây
Tham số callback là một hàm sẽ được thực thi sau khi việc hiện/ẩn phần tử đã được hoàn thành.

Ví dụ 1:

HIỆN/ẨN phần tử với hiệu ứng trượt (không sử dụng tham số)

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[value='hien']").click(function(){
            $("#abc").slideDown();
        })
        $("input[value='an']").click(function(){
            $("#abc").slideUp();
        })
    })
</script>
</head>
<body>
  <p><input type="radio" name="radio" value="hien" checked> Hiện</p>
  <p><input type="radio" name="radio" value="an"> Ẩn</p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 2:

HIỆN/ẨN phần tử với hiệu ứng trượt (chỉ sử dụng tham số time)

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[value='hien']").click(function(){
            $("#abc").slideDown(2000);
        })
        $("input[value='an']").click(function(){
            $("#abc").slideUp(2000);
        })
    })
</script>
</head>
<body>
  <p><input type="radio" name="radio" value="hien" checked> Hiện</p>
  <p><input type="radio" name="radio" value="an"> Ẩn</p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 3:

HIỆN/ẨN phần tử với hiệu ứng trượt (chỉ sử dụng tham số callback)

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[value='hien']").click(function(){
            $("#abc").slideDown(function(){alert("HIỆN");});
        })
        $("input[value='an']").click(function(){
            $("#abc").slideUp(function(){alert("ẨN");});
        })
    })
</script>
</head>
<body>
  <p><input type="radio" name="radio" value="hien" checked> Hiện</p>
  <p><input type="radio" name="radio" value="an"> Ẩn</p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 4:

HIỆN/ẨN phần tử với hiệu ứng trượt (sử dụng tham số time và callback)

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[value='hien']").click(function(){
            $("#abc").slideDown("slow", function(){alert("HIỆN");});
        })
        $("input[value='an']").click(function(){
            $("#abc").slideUp("slow", function(){alert("ẨN");});
        })
    })
</script>
</head>
<body>
  <p><input type="radio" name="radio" value="hien" checked> Hiện</p>
  <p><input type="radio" name="radio" value="an"> Ẩn</p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Phương thức slideToggle()

Phương thức slideToggle() dùng để thực hiện luân phiên giữa việc hiện và ẩn phần tử HTML với hiệu ứng trượt.

Ví dụ:

Khi phần tử đang bị ẩn, phương thức slideToggle() sẽ hiện phần tử lên.
Khi phần tử đang hiện, phương thức slideToggle() sẽ ẩn phần tử đi.

Cú pháp: $(selector).slideToggle(time, callback);

Cách sử dụng tham số “time” và “callback” giống như trong phương thức slideDown() và slideUp()

Ví dụ 1:

Không sử dụng tham số

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#abc").slideToggle();
        })
    })
</script>
</head>
<body>
  <p><button> Click here</button></p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 2:

Chỉ sử dụng tham số time

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#abc").slideToggle(2000);
        })
    })
</script>
</head>
<body>
  <p><button> Click here</button></p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 3:

Chỉ sử dụng tham số callback

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#abc").slideToggle(function(){alert("XONG");});
        })
    })
</script>
</head>
<body>
  <p><button> Click here</button></p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 4:

Sử dụng tham số time và callback

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#abc").slideToggle("slow", function(){alert("XONG");});
        })
    })
</script>
</head>
<body>
  <p><button> Click here</button></p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>