jQuery: Hiệu ứng Slide
Hiệu ứng slide hay hiệu ứng trượt được jQuery hỗ trợ, có thể tạo được hiệu ứng trượt lên hoặc trượt xuống cho một đối tượng bất kỳ.
Các phương thức trượt:
Ø slideDown()
Ø slideUp()
Ø slideToggle()
Phương thức slideDown()
Phương thức này dùng để trượt một phần tử theo hướng xuống dưới.
Cú pháp:
$(Bộ_chọn).slideDown(Tốc_độ, callback);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.11.0 /jquery.min.js">
</script>
<script>
$(function(){
$("#flip").click(function(){
$("#panel").slideDown( "slow");
});
});
</script>
<style type="text/css">
#panel,#flip{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click đây => Trượt xuống</div>
<div id="panel">v1study.com<br> demo.v1study.com</div>
</body>
</html>
Phương thức slideUp()
Ngược với slideDown(), slideUp() sẽ trượt phần tử theo hướng lên trên.
Cú pháp:
$(Bộ_chọn).slideUp(Tốc_độ, callback);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.10.2 /jquery.min.js">
</script>
<script>
$(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
}
#flip{
cursor:pointer;
}
</style>
</head>
<body>
<div id="flip">Click đây => Trượt lên</div>
<div id="panel">v1study.com<br> demo.v1study.com</div>
</body>
</html>
Phương thức slideToggle()
Đây là phương thức kết hợp cả hai phương thức slideDown() và slideUp().
Cú pháp:
$(Bộ_chọn).slideToggle(Tốc_độ, callback);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.10.2 /jquery.min.js">
</script>
<script>
$(function(){
$("#flip").click(function(){
$("#panel").slideToggle( "slow");
});
});
</script>
<style type="text/css">
#panel,#flip{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
}
#flip{
cursor:pointer;
}
</style>
</head>
<body>
<div id="flip">Click đây => Trượt lên + Trượt xuống</div>
<div id="panel">v1study.com<br> demo.v1study.com</div>
</body>
</html>