Thứ Sáu, 7 tháng 3, 2014
jQuery Slide
«Trở lại
Chương tiếp theo »
jQuery trượt phương pháp
Với jQuery bạn có thể tạo ra một hiệu ứng trượt trên các yếu tố.
jQuery có phương pháp trượt sau:
- slideDown ()
- slideUp ()
- slideToggle ()
jQuery slideDown () Phương pháp
Phương pháp jQuery slideDown () được sử dụng để trượt xuống một phần tử.
Cú pháp:
$(selector).slideDown(speed,callback);
Các thông số tốc độ tùy chọn xác định thời gian hiệu lực. Nó có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi chạy xong trượt.
Ví dụ dưới đây trình bày slideDown () phương pháp:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(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 to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
Thử nó cho mình »
jQuery slideUp () Phương pháp
Phương pháp jQuery slideUp () được sử dụng để trượt lên một phần tử.
Cú pháp:
$(selector).slideUp(speed,callback);
Các thông số tốc độ tùy chọn xác định thời gian hiệu lực. Nó có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi chạy xong trượt.
Ví dụ dưới đây trình bày slideUp () phương pháp:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(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;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
Thử nó cho mình »
jQuery slideToggle () Phương pháp
Phương pháp jQuery slideToggle () Toggles giữa slideUp () phương pháp slideDown () và.
Nếu các yếu tố đã được giảm xuống, slideToggle () sẽ trượt chúng.
Nếu các yếu tố đã được trượt lên, slideToggle () sẽ trượt xuống.
$(selector).slideToggle(speed,callback);
Các thông số tốc độ tùy chọn có thể mất các giá trị sau: "chậm", "nhanh", mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi chạy xong trượt.
Ví dụ dưới đây trình bày slideToggle () phương pháp:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(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;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
Thử nó cho mình »
«Trở lại
Chương tiếp theo »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét