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>