[jQuery] 效果:Slide滑動效果
Slide()
jQuery的Slide方法可以在HTML中製造滑動的效果。
Slide方法:
-
slideDown() : 往下滑動。
-
slideUp() : 往上滑動。
-
slideToggle() : 轉換上下滑動效果。
slideDown()
slideDown()方法能夠將HTML元素做向下滑動的效果。
語法:
$(selector).slideDown(speed,callback);
speed參數指定持續時間，即效果的速度。參數可為"slow"、"fast"或自行設定毫秒。
callback參數是一個function，執行於slideDown()方法執行完畢後，避免執行其他效果時發生錯誤。
slideDown()範例:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#header").click(function () {
$("#body").slideDown("slow");
});
});
</script>
<style>
#header, #body {
padding:5px;
text-align:center;
background-color:lightgreen;
border:solid 1px #c3c3c3;
}
#body {
display:none;
}
</style>
</head>
<body>
<div id="header">點擊</div>
<div id="body">Hello World</div>
</body>
</html>
<style></style>
設定div的CSS，其中<div id="body">為display:none預設隱藏。
$(document).ready(function () { } );
HTML載入完畢後才執行function，避免找不到HTML元素。
$("#header").click(function () { } );
將id="header"的HTML元素加上click事件與執行function。
$("#body").slideDown("slow");
將id="body"的HTML元素執行slideDown()方法，向下滑出元素，指定效果速度為"slow"。
初始畫面:
按下點擊，向下滑出隱藏的<div id="body">:
slideUp()
slideUp()方法能夠將HTML元素做向上滑動的效果。
語法:
$(selector).slideUp(speed,callback);
speed參數指定持續時間，即效果的速度。參數可為"slow"、"fast"或自行設定毫秒。
callback參數是一個function，執行於slideUp()方法執行完畢後，避免執行其他效果時發生錯誤。
slideUp()範例:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#header").click(function () {
$("#body").slideUp("slow");
});
});
</script>
<style>
#header, #body {
padding:5px;
text-align:center;
background-color:lightgreen;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div id="header">點擊</div>
<div id="body">Hello World</div>
</body>
</html>
<style></style>
設定div的CSS。
$(document).ready(function () { } );
HTML載入完畢後才執行function，避免找不到HTML元素。
$("#header").click(function () { } );
將id="header"的HTML元素加上click事件與執行function。
$("#body").slideUp("slow");
將id="body"的HTML元素執行slideUp()方法，向上隱藏元素，指定效果速度為"slow"。
初始畫面:
按下點擊，向上隱藏<div id="body">:
slideToggle()
slideToggle()方法能夠在 slideDown()與slideUp()方法間做切換。
若HTML元素已經向下滑動顯示，slideToggle()便會向上滑動隱藏。
若HTML元素已經向上滑動隱藏，slideToggle()便會向下滑動顯示。
語法:
$(selector).slideToggle(speed,callback);
speed參數指定持續時間，即效果的速度。參數可為"slow"、"fast"或自行設定毫秒。
callback參數是一個function，執行於slideToggle()方法執行完畢後，避免執行其他效果時發生錯誤。
slideToggle()範例:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#header").click(function () {
$("#body").slideToggle("slow");
});
});
</script>
<style>
#header, #body {
padding:5px;
text-align:center;
background-color:lightgreen;
border:solid 1px #c3c3c3;
}
#body {
display:none;
}
</style>
</head>
<body>
<div id="header">點擊</div>
<div id="body">Hello World</div>
</body>
</html>
<style></style>
設定div的CSS，其中<div id="body">為display:none預設隱藏。
$(document).ready(function () { } );
HTML載入完畢後才執行function，避免找不到HTML元素。
$("#header").click(function () { } );
將id="header"的HTML元素加上click事件與執行function。
$("#body").slideToggle("slow");
將id="body"的HTML元素執行slideToggle()方法，切換 slideDown()與slideUp()，指定效果速度為"slow"。
若HTML元素已經向上滑動隱藏，slideToggle()便會向下滑動顯示:
