一、显示与隐藏动画效果
1.show()方法与hide()方法
show()方法用于显示页面中的元素，hide()方法则隐藏页面中的元素。
show()方法与hide()方法的语法结构：
jQuery对象.show(duration,[fn]);
jQuery对象.hide(duration,[fn]);
参数duration表示动画运行的时间，可以使用关键字slow、normal和fast，分别对应的时长为0.6秒、0.4秒、和0.2秒；也可以用数值，单位默认毫秒，此时参数不需要加引号。例如，使div元素在0.6秒内发生逐渐显示的动画效果：
$("div").show("slow");或者$("div").show(600);
如果不设置show()方法的duration参数，即默认为0，效果是立即显示元素。
-
示例
单击按钮实现图片显示与隐藏的动画效果
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<style type="text/css">
img{
display: none;/*图片默认不显示*/
}
</style>
</head>
<body>
<p><img src="frozen.jpg" id="pic"/></p>
<input type="button" value="显示" id="btn"/>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
if($(this).val()=="显示"){
$("#pic").show("slow",function(){
$(this).css({"border":"1px solid #ccc","padding":"5px"});
});
$(this).val("隐藏");
}else{
$("#pic").hide("slow");
$(this).val("显示");
}
});
});
</script>
</body>
</html>
二、淡入与淡出动画效果
1.fadeIn()方法和fadeOut()方法
show()方法和hide()方法与fadeIn()方法和fadeOut()方法相比不同之处在于，show()方法和hide()方法的动画效果使元素的宽度、高度和透明度都发生了变化，而fadeIn()方法和fadeOut()方法仅改变元素的透明度，其他属性不修改。
fadeIn()方法和fadeOut()方法的语法结构：
jQuery对象.fadeIn(duration,[fn]);
jQuery对象.fadeOut(duration,[fn]);
-
示例
图片淡入淡出的动画效果
<body>
<p><img src="frozen.jpg" id="pic"/></p>
<input type="button" value="淡入" id="btn"/>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
if($(this).val()=="淡入"){
$("#pic").fadeIn("slow",function(){
$(this).css({"border":"1px solid #ccc","padding":"5px"});
});
$(this).val("淡出");
}else{
$("#pic").fadeOut("slow");
$(this).val("淡入");
}
});
});
</script>
</body>
2.fadeTO()方法
在jQuery中，fadeIn()方法和fadeOut()方法通过改变元素的透明度来实现元素的显示和隐藏，其透明度是从0.0到1.0淡入或从1.0到0.0淡出。如果要将透明度指定到某一个值，则需要调用fadeTO()方法。
fadeTO()的语法格式为：
jQuery对象.fadeTO(duration,opacity,[fn]);
参数duration为动画效果的速度，参数 opacity用于制定不透明度，取值范围0~1，0代表完全透明，1代表完全不透明。
三、滑入与滑出动画效果
1.slideDown()方法与slideUp()方法
slideDown()方法与slideUp()方法的语法结构：
jQuery对象.slideDown(duration,[fn]);
jQuery对象.slideUp(duration,[fn]);
四、自定义动画
1.简单的动画
在jQuery当中通常采用amimate()方法来自定义动画效果
amimate()的语法结构
jQuery对象.amimate(properties,[duration],[fn]);
参数properties使用一个“名：值”的形式对象。amimate()方法只能改变可以取数字值的css属性，如大小属性（width，height）、边框属性（border-width）、外边距属性（margin）、内边距属性（padding）、定位属性（top,left,bottom,right）、背景属性（background-position）和透明的属性（opacity）。
-
示例
单击图片，图片大小变换
<body>
<img src="frozen.jpg"/>
<script type="text/javascript">
$(function(){
$("img").click(function(){
$(this).animate({"width":"280px","height":"280px"},"slow");
});
});
</script>
</body>
2.移动位置的动画
-
示例
通过animate()方法，单击图片达到移动的效果
<body>
<img src="yinzi.jpg"/>
<script> type="text/javascript">
$(function(){
$("img").click(function(){
$(this).animate({
"left":"+=100px",
"top":"+=100px",
"opacity":"0.5" },3000);
});
});
</script>
</body>
3.队列中的动画
-
示例
在页面中添加一个<div>设置<div>的css属性,单击<div>，高度在原有的基础上扩大一倍，随后宽度在原有的基础上也扩大一倍，然后恢复以前的高度和宽度。脚本代码如下：
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){
$(this).animate({height:100},"slow")//第一列
.animate({width:100},"slow")//第二列
.animate({height:50},"slow")//第三列
.animate({width:50},"slow")//第四列
});
});
</script>
五、停止动画
1.stop()方法
stop()方法能够结束当前的动画，并进入到下一个动画。stop()语法如下：
jQuery对象.stop([clearQueue] [,gotoEnd]);
语法解释：stop()方法的两个参数均为可选参数，且均为布尔类型。如果使用不带任何参数的stop方法，则会立即停止当前正在执行的动画，如果后面还有动画要继续，则以当前状态开始接下来的动画。clearQueue参数表示是否清空未执行玩的动画列队，gotoEnd参数表示是否立即完成正在执行的动画。
