Định nghĩa và sử dụng

  • .hide(): Ẩn thành phần phù hợp.
  • thành phần sẽ được ẩn giống như được sử dụng style="display: none;".

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.hide()

$('p').hide();

.hide(Độ bền)

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').hide(300);
$('p').hide("fast");

.hide(Độ bền,function(){...})

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').hide(300,function(){
    $('span').hide(100);
});
  • Đã được thêm vào từ phiên bản 1.4.3

.hide(Độ bền,'easing',function(){...})

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

Easing có thể sử dụng swing hoặc linear

$('p').hide(300,'swing',function(){
    $('span').hide(100);
});

.hide()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    height: 100px;
    width: 100px;
}
</style>
<script>
$(function(){
    $('div').hide();
    $('button').click(function(){
        $('div').show();
        
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div>Đây là thành phần được ẩn</div>
</body>
</html>

Hiển thị trình duyệt:

Thành phần đã được ẩn bởi .hide().

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery - trước khi click

<p><button>Click</button></p>
<div>Đây là thành phần được ẩn</div>

<p><button>Click</button></p>
<div style="display: none;">Đây là thành phần được ẩn</div>

.hide(Độ bền)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 100px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.test03').hide(2000);
        $('.test02').hide('slow');
        $('.test01').hide();
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="test03">hide(2000)</div>
<div class="test02">hide('slow')</div>
<div class="test01">hide()</div>
</body>
</html>

Hiển thị trình duyệt:

Click vào từng button để thấy hiệu ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p><button>Click</button></p>
<div class="test03">hide(2000)</div>
<div class="test02">hide('slow')</div>
<div class="test01">hide()</div>

<p><button>Click</button></p>
<div class="test03" style="display: none;">hide(2000)</div>
<div class="test02" style="display: none;">hide('slow')</div>
<div class="test01" style="display: none;">hide()</div>

.hide(Độ bền,function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    height: 100px;
    width: 100px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('div').hide(2000,function(){
            alert('Kết thúc.');
        });
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div>Thành phần div</div>
</body>
</html>

Hiển thị trình duyệt:

Click vào từng button để thấy hiệu ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p><button>Click</button></p>
<div>Thành phần div</div>

<p><button>Click</button></p>
<div style="display: none;">Thành phần div</div>

.hide(Độ bền,'easing',function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 100px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.swing').hide(2000,'swing',function(){
            $('span.txtSwing').text('Đã ẩn - swing');
        });
        
        $('.linear').hide(2000,'linear',function(){
            $('span.txtLinear').text('Đã ẩn - linear');
        });
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<p><span class="txtSwing"></span></p>
<p><span class="txtLinear"></span></p>
<div class="swing">hide swing</div>
<div class="linear">hide linear</div>
</body>
</html>

Hiển thị trình duyệt:

Click vào từng button để thấy hiệu ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p><button>Click</button></p>
<p><span class="txtSwing"></span></p>
<p><span class="txtLinear"></span></p>
<div class="swing">hide swing</div>
<div class="linear">hide linear</div>

<p><button>Click</button></p>
<p><span class="txtSwing">Đã ẩn - swing</span></p>
<p><span class="txtLinear">Đã ẩn - linear</span></p>
<div class="swing" style="display: none;">hide swing</div>
<div class="linear" style="display: none;">hide linear</div>