Định nghĩa và sử dụng
.slideUp()ẩn các thành phần phù hợp với hiệu ứng chuyển động trượt (slide)..slideUp()được ứng dụng để tạo menu slide, khi click hoặc hover thì menu con sẽ slide lên, hoặc có thể dùng để tạo accordion.
Cấu trúc
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$('p').slideUp(300);
$('p').slideUp(fast);
.slideUp(Độ bền,function(){...})
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$('p').slideUp(300,function(){
$('span').fadeIn(100);
});
Độ 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').slideUp(300,'swing');
Bài học chỉ muốn cho bạn hiểu cách sử dụng .slideUp, muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.
.slideUp(Độ 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: block;
float: left;
margin-right: 20px;
height: 100px;
width: 150px;
}
p {
clear: both;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('.test03').slideUp(2000);
$('.test02').slideUp('slow');
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div class="test03">slideUp(2000)</div>
<div class="test02">slideUp(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> |
<p><button>Click</button></p> |
.slideUp(Độ 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: block;
float: left;
margin-right: 20px;
height: 100px;
width: 150px;
}
p {
clear: both;
}
</style>
<script>
$(function(){
$('button').click(function(){
$('div').slideUp(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> |
<p><button>Click</button></p> |
.slideUp(Độ 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: block;
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').slideUp(2000,'swing');
$('.linear').slideUp(2000,'linear');
});
});
</script>
</head>
<body>
<p><button>Click</button></p>
<div class="swing">slideUp swing</div>
<div class="linear">slideUp 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> |
<p><button>Click</button></p> |