hide() 與show() 方法之間的切換 |
| #以下來介紹一些常用動畫函數。
1、animate()
animate() 方法執行 CSS 屬性集的自訂動畫。
該方法透過 CSS 樣式將元素從一個狀態改變為另一個狀態。 CSS屬性值是逐漸改變的，這樣就可以創造出動畫效果。
只有數字值可建立動畫（例如 "margin:30px"）。字串值無法建立動畫（例如 "background-color:red"）。
提示：請使用 " =" 或 "-=" 建立相對動畫。
範例：透過改變元素的高度，對元素套用動畫：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#box").animate({
height: "300px"
});
});
$("#btn2").click(function() {
$("#box").animate({
height: "100px"
});
});
});
</script>
</head>
<body>
<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
#2、hide()、show()和toggle( )
範例：隱藏或顯示
元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide();
});
$(".btn2").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>
</html>
3、slideUp() 、slideDown()和slideToggle()
slideUp() 方法：以滑動方式隱藏被選元素。
slideDown() 方法：以滑動方式顯示被選取元素。
slideToggle() 方法：slideUp() 與slideDown()方法之間的切換
範例：以滑動方式隱藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideUp();
});
$(".btn2").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
</html>
4、fadeIn() 、 fadeOut()和fadeToggle()
fadeIn () 方法逐漸改變被選元素的不透明度，從隱藏到可見（褪色效果）。
fadeOut() 方法逐漸改變被選元素的不透明度，從可見到隱藏（褪色效果）。
fadeToggle()：fadeIn() 與fadeOut()方法之間的切換
範例：使用淡入效果顯示
元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").fadeOut()
});
$(".btn2").click(function() {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
</html>
5、fadeTo()
fadeTo() 方法逐漸改變被選元素的不透明度為指定的值（褪色效果）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").fadeTo(1000, 0.4);
});
});
</script>
</head>
<body>
<button>逐渐改变P元素的不透明度</button>
<p>这是一个段落。</p>
</body>
</html>
.....
【推薦學習：jQuery影片教學、web前端視頻】
