2.1顯示、隱藏
hide（）：隱藏
將高度、寬度、透明度變爲0，display爲“none”
show（）：顯示
將高度、寬度、透明度變爲初始值（css設置的時候），display爲“none”
toggle()：切換
若display爲“none”時點擊變成block，反正變成none。
<script src="../jquery-3.2.1.min.js"></script>
</head>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<body>
<div id="div1"></div>
<button id="btnHide">消失按鈕</button>
<button id="Show">顯示按鈕</button>
<button id="btnToggle">切換按鈕</button>
</body>
<script>
/* $("button").click(function () {
$("#div1").hide(3000);
});*/
$("#btnHide").click(function () {
$("#div1").hide(3000);
});
$("#Show").click(function () {
$("#div1").show(3000);
});
$("#btnToggle").click(function () {
$("#div1").toggle("fast");
});
</script>2.2淡入淡出
fadein（）：淡入
將隱藏的樣式通過改變透明度（透明度由0到1的過程），讓它顯現出來
fadeOut（）：淡出
將顯現的樣式通過改變透明度（透明度由1到0的過程），讓它隱藏起來
fadeToggle（）：切換
若隱藏就讓其顯現出來，若顯現就讓其隱藏起來。
fadeTo（）：固定
固定其透明度，只讓其到其值
<script src="../jquery-3.2.1.min.js"></script>
</head>
<style>
#div1{
height: 200px;
width: 200px;
background-color: blue;
display: none;
}
</style>
<body>
<div id="div1">
</div>
<button id="btnFadeIn">淡入</button>
<button id="btnFadeOut">淡出</button>
<button id="btnFadeToggle">切換</button>
<button id="btnFadeTo">固定</button>
</body>
<script>
$("#btnFadeIn").click(function () {
$("#div1").fadeIn(5000)
});
$("#btnFadeOut").click(function () {
$("#div1").fadeOut(5000)
});
$("#btnFadeToggle").click(function () {
$("#div1").fadeToggle(5000)
});
$("#btnFadeTo").click(function () {
$("#div1").fadeTo(5000,0.1)
});
</script>2.3上滑、下滑
slideUp（）：上滑
將設置的高度由初始值變爲0的過程，使其隱藏起來
slideDown（）：下滑
先顯現它，然後將設置的高度由0變爲初始值的過程。
slideToggle（）：切換
若元素時隱藏就讓其顯現出來，若顯現就讓其隱藏起來。
<script src="../jquery-3.2.1.min.js"></script>
</head>
<style>
#div1{
height: 200px;
width: 200px;
background-color: red;
/*display: none;*/
}
</style>
<body>
<div id="div1">
</div>
<button id="btnSlideUp">上滑</button>
<button id="btnSlideDown">下滑</button>
<button id="btnSlideToggle">切換</button>
<!--<button id="btnFadeTo">固定</button>-->
</body>
<script>
// $("#btnSlideUp").click(function () {
// $("#div1").slideUp(5000);
// });
$("#btnSlideDown").click(function () {
$("#div1").slideDown(5000)
});
$("#btnSlideToggle").click(function () {
$("#div1").slideToggle(5000)
});
$("#btnSlideUp").click(function () {
$("#div1").slideUp(5000, function () {
alert("上滑了")
});
});
</script>2.4動畫
animate() :用於創建自定義動畫。
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長,它可以取以下值：”slow”、”fast” 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。
<script src="../jquery-3.2.1.min.js"></script>
<style>
#div1 {
height: 200px;
width: 200px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<button >點擊開始動畫</button>
<div id="div1">
</div>
</body>
<script>
$("button").click(function () {
var div = $("#div1");
div.animate({
left:'300px',
top:'300px',
width:'+=200px',
height:'+=200px',
opacity:'0.5'
},6000);
});
</script>我們可以改變預定義的值來實現我們所需要的內容的顯示或隱藏，只要把屬性的動畫值設置爲 “show”、”hide” 或 “toggle”即可。
$("button").click(function () {
var div = $("#div1");
div.animate({
left:'300px',
top:'300px',
height :'toggle',
opacity:'0.5'
},600);
});stop():用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。可選的 goToEnd 參數規定是否立即完成當前動畫。
因此， stop() 會清除在被選元素上指定的當前動畫。
<body>
<button id="start">點擊開始動畫</button>
<button id="stop">點擊停止動畫</button>
<div id="div1"></div>
</body>
<script> var div = $("#div1");
$("#start").click(function () {
div.animate({height:'300px'},"slow");
div.animate({height:'100px'},"slow");
});
$("#stop").click(function(){
div.stop()
})
</script>