.slideDown() | Hàm jQuery | Tham khảo jQuery

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

.slideDown(): Hiển thị các thành phần phù hợp với hiệu ứng chuyển động trượt (slide).

Cấu trúc

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

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

$('p').slideDown(300);

$('p').slideDown(fast);

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

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

$('p').slideDown(300,function(){
    $('span').fadeIn(100);
});

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

.slideDown(Độ bền,'easing')

Độ 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').slideDown(300,'swing');

.slideDown(Độ 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').slideDown(300,'swing',function(){
    $('span').fadeIn(100);
});

.slideDown(Độ 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;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 150px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.test03').slideDown(2000);
        $('.test02').slideDown('slow');
    });
});
</script>
</head>

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

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

Click vào 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">slideDown(2000)</div> <div class="test02">slideDown(slow)</div>	<p><button>Click</button></p> <div class="test03" style="display: block;">slideDown(2000)</div> <div class="test02" style="display: block;">slideDown(slow)</div>

.slideDown(Độ 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;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 150px;
}
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('div').slideDown(2000,function(){
            $(this).css('background-color','red');
        });
    });
});
</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 button để thấy hiệu ứng, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.

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: block; background-color: red;">Thành phần div</div>

.slideDown(Độ bền,'easing')

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;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 150px;
}
p {
    clear: both;
}
.visible {
    background-color: red;
    display: block!important;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.swing').slideDown(2000,'swing');
        
        $('.linear').slideDown(2000,'linear');
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="swing">slideDown swing</div>
<div class="linear">slideDown linear</div>
</body>
</html>

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

Click vào 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="swing">slideDown swing</div> <div class="linear">slideDown linear</div>	<p><button>Click</button></p> <div class="swing" style="display: block;">Nội dung mới</div> <div class="linear" style="display: block;">Nội dung mới</div>

.slideDown(Độ 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;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 150px;
}
p {
    clear: both;
}
.visible {
    background-color: red;
    display: block!important;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.swing').slideDown(2000,'swing',function(){
            $(this).addClass('visible').text('Nội dung mới');
        });
        
        $('.linear').slideDown(2000,'linear',function(){
            $(this).addClass('visible').text('Nội dung mới');
        });
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="swing">slideDown swing</div>
<div class="linear">slideDown linear</div>
</body>
</html>

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

Click vào button để thấy hiệu ứng, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.

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="swing">slideDown swing</div> <div class="linear">slideDown linear</div>	<p><button>Click</button></p> <div class="swing" style="display: block; background-color: red;">Nội dung mới</div> <div class="linear" style="display: block; background-color: red;">Nội dung mới</div>

.slice()

.slideToggle()