-------------------------------------------------------------------------------------------------------
1. 隐藏和显示
show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。
1.1 hide() 和 show()
我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div><button class="show">显示</button><button class="hide">隐藏</button><script>// 显示元素$(".show").click(function () {$("div").show();});// 隐藏元素$(".hide").click(function () {$("div").hide();});</script>
</body>
hide() 和 show() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数。
| 参数 | 描述 | | :---: | :---: | | speed | 【可选】规定隐藏/显示的速度，时间单位为毫秒。 | | callback | 【可选】 规定隐藏或显示完成后所执行的函数名称。 |
下面的例子演示了带有 speed 参数的 hide() 方法：
<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div><button class="show">显示效果</button><button class="hide">隐藏效果</button><script>// 动画显示元素$(".show").click(function () {$("div").show(1000, function () {console.log("div动画显示完成");});});// 动画隐藏元素$(".hide").click(function () {$("div").hide(1000, function () {console.log("div动画隐藏完成");});});</script>
</body>
1.2 toggle()方法
我们可以使用 toggle() 方法来切换 hide() 和 show() 方法。
toggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div><button class="toggle">显示隐藏切换效果</button><script>// 切换显示或隐藏元素$(".toggle").click(function () {$("div").toggle(1000, function () {console.log("切换完毕");});});</script>
</body>
2.淡入和淡出
fadeIn()方法和fadeOut()方法与show方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display: none")。fadeIn()方法则恰好相反。
2.1 fadeIn()和fadeOut()
fadeIn() 用于淡入已隐藏的元素，fadeOut() 方法用于淡出可见元素。
fadeIn() 和 fadeOut() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div><button class="fade-in">淡入效果</button><button class="fade-out">淡出效果</button><script>$(".fade-in").click(function () {$("div").fadeIn(1000, function () {console.log("淡入动画完成");});});$(".fade-out").click(function () {$("div").fadeOut(1000, function () {console.log("淡出动画完成")});})</script>
</body>
2.2 fadeToggle() 方法
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果；如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
fadeToggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body><div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div><button class="toggle">淡入淡出切换效果</button><script>$(".toggle").click(function () {$("div").fadeToggle(1000, function () {console.log("淡入淡出切换动画完成");});});</script>
</body>
2.3 fadeTo() 方法
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间），语法：$(selector).fadeTo(speed, opacity, callback);。
fadeTo() 方法中opacity 参数【必须】将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
下面的例子演示了带有不同参数的 fadeTo() 方法：
<body> <div style="width: 200px; height: 200px; background-color: yellow; opacity:0;"></div><button class="fade-to">给定的不透明度</button><script>$(".fade-to").click(function () {$("div").fadeTo(500, 0.25, function () {console.log("透明度达到0.25");});$("div").fadeTo(1000, 0.5, function () {console.log("透明度达到0.5");});$("div").fadeTo(1000, 0.75, function () {console.log("透明度达到0.75");});$("div").fadeTo(500, 1.0, function () {console.log("透明度达到1.0");});});</script>
</body>
3. 展开和收起
slideDown()方法和slideUp()方法只改变元素的高度，slideUp()方法会在指定的一段时间内降低元素的高度，直到元素完全消失("display: none")。slideDown()方法则恰好相反。
3.1 slideDown()和slideUp()
slideDown() 方法用于向下滑动元素，slideUp() 方法用于向上滑动元素。
slideDown() 和 slideUp() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body><div style="width: 200px; height: 200px; background-color: yellow;"></div><button class="slideUp">向上滑动</button><button class="slideDown">向下滑动</button><script>$(".slideUp").click(function () {$("div").slideUp(1000, function () {console.log("向上滑动完成");});});$(".slideDown").click(function () {$("div").slideDown(1000, function () {console.log("向下滑动完成");});});</script>
</body>
3.2 slideToggle() 方法
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们；如果元素向上滑动，则 slideToggle() 可向下滑动它们。
slideToggle() 可以携带两个可选参数，一个是speed参数另外一个是callback参数，两个参数的作用和show()方法一样。
<body><div style="width: 200px; height: 200px; background-color: yellow"></div><button class="toggle">向上向下滑动切换</button><script>$(".toggle").click(function () {$("div").slideToggle(1000, function () {console.log("切换完成");});});</script>
</body>
4. 自定义动画
前面已经讲了多种类型的动画，如果这些动画还无法满足用户的需求，那么就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题。在jQuery中，我们可以使用animate()方法来自定义动画。
4.1 animate() 方法
animate() 方法用于创建自定义动画的函数。
语法：$(selector).animate({params}, speed, easing, callback);
| 参数 | 描述 | | :---: | :---: | | params | 【必须】一组包含作为动画属性和终值的样式属性和及其值的集合。 | | speed | 【可选】规定隐藏/显示的速度，时间单位为毫秒。 | | easing | 【可选】规定在不同的动画点中设置动画速度的 easing 函数，默认jQuery提供"linear" 和 "swing"。 | | callback | 【可选】规定动画完成后所执行的函数名称。 |
linear：匀速 swing：先慢中间快后慢
自定义动画实例：
<body><div style="width: 200px; height: 200px; opacity: 0.2; background-color: gold; position: relative;"></div><button class="animate">自定义动画</button><script>$(".animate").click(function () {$("div").animation({// 注意: margin-top也可写成驼峰式marginTop"margin-top": "100px","opacity": "1.0","width": "300px","height": "300px",// 注意：如果进行位置操作，则需要设置元素定位属性值：relative、fixed或absolute"left": "100px"}, 3000, function () {console.log("自定义动画结束");});});</script>
</body>
4.2 animate() 使用队列功能
jQuery 提供针对动画的队列功能，我们可以编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
<body><div class="wrap" style="width: 200px; height: 200px; background-color: gold;"></div><button class="animate">使用队列功能</button><script>$(".animate").click(function () {// 盒子移动到右上角$("#box").animate({"top" : "10px","left" : "450px"}, 1000);// 盒子移动到右下角$("#box").animate({"top" : "450px","left" : "450px"}, 1000);// 盒子移动到左下角$("#box").animate({"top" : "450px","left" : "10px"}, 1000);// 盒子移动到左上角$("#box").animate({"top" : "10px","left" : "10px"}, 1000);});</script>
</body>
4.3 jQuery插件
jQuery动画中并不支持色彩动画（例如背景颜色，字体颜色），如果想要生成颜色动画，那么我们可以使用 jquery.color.js 插件来帮我们实现。
<body><div style="width: 200px; height: 200px; background-color: gold; position: relative;">我是一个DIV</div><button class="animate">自定义动画</button><script>$(".animate").click(function () {$("div").animate({"margin-top": "100px","width": "300px","height": "300px","color": "red","background-color" : "blue","left": "100px"}, 3000);});</script>
</body>
5. 停止动画
很多时候需要停止匹配元素正在进行的动画，那么我们可以使用stop()方法来停止动画。
语法：$(selector).stop(stopAll, goToEnd);
| 参数 | 描述 | | :---: | :---: | | stopAll | 【可选】是否清空当前的队列。默认值为false, 当值为true时, 表示立即清空当前的队列，后面的动画都不执行了。 | | goToEnd | 【可选】是否立即执行完当前动画。默认值为false, 当值为true时， 表示立即执行完当前动画，然后再执行别的动画。 |
停止动画示例：
<body><div style="width: 100px;height: 100px;background-color:red;position: relative;"></div><button id="btn" style="float: right;">停止动画</button><script>$("div").click(function () {$(this).animate({"left": "+=300px"}, 3000);$(this).animate({"top": "+=300px"}, 3000);$(this).animate({"left": "-=300px"}, 3000);$(this).animate({"top": "-=300px"}, 3000);});$("#btn").click(function () {// 表示立即停止全部动画，原地停止$("div").stop(true, false);});</script>
</body>
