目錄
動畫
1. 三種方式顯示和隱藏元素
1. 默認顯示和隱藏方式
1. show([speed,[easing],[fn]])
1. 參數：
1. speed：動畫的速度。三個預定義的值("slow","normal", "fast")或表示動畫時長的毫秒數值(如：1000)
2. easing：用來指定切換效果，默認是"swing"，可用參數"linear"
* swing：動畫執行時效果是 先慢，中間快，最後又慢
* linear：動畫執行時速度是勻速的
3. fn：在動畫完成時執行的函數，每個元素執行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
2. 滑動顯示和隱藏方式
1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])
3. 淡入淡出顯示和隱藏方式
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顯示隱藏動畫</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
/*點擊隱藏效果*/
function hideFn() {
//基本動畫
/* $("#showDiv").hide(2000,function () {
alert("我被隱藏了")
});*/
//向上消失
/* $("#showDiv").slideUp("slow","linear",function () {
alert("我向上隱藏了")
})*/
// 淡入淡出之淡出
/* $("#showDiv").fadeOut("slow", "linear", function () {
alert("我談談的消失了")
})*/
/* $("#showDiv").fadeTo("slow",0,function () {
alert("我的透明度改變了")
})*/
$("#showDiv").toggle(1000,function () {
alert("顯示隱藏切換");
});
}
function showFn() {
//基本動畫
/* $("#showDiv").show("slow","swing",function () {
alert("我重新顯示了");
})*/
//向下滑動出現
/* $("#showDiv").slideDown(1000,function () {
alert("我又滑下來了");
})*/
// 淡入淡出之淡入
/* $("#showDiv").fadeIn(1000,function () {
alert("淡淡的出現");
})*/
}
</script>
</head>
<body>
<input type="button" value="點擊按鈕隱藏div" οnclick="hideFn()">
<input type="button" value="點擊按鈕顯示div" οnclick="showFn()">
<input type="button" value="點擊按鈕切換div顯示和隱藏" οnclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div顯示和隱藏
</div>
</body>
</html>
