一、显示与隐藏动画效果
1.show()方法与hide()方法
(1).show()方法：用于显示页面中的元素。
<script type="text/javascript">
// 语法
$().show(duration,[fn]);
// 参数duration代表动画效果运行时间，可使用关键字：slow、normal、fast，也可以使用数值
// 使用方法
$("div").show("slow");
$("div").show(600);
</script>
(2).hide()方法：用于隐藏页面中的元素，其参数含义与show()方法一致。
<script type="text/javascript">
// 语法
$().hide(duration,[fn]);
// 使用方法
$("div").hide("slow");
$("div").hide(600);
</script>
2.toggle()方法
切换元素的可见状态，其参数含义与show()方法一致。
<script type="text/javascript">
// 语法
// 如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
$().toggle(duration,[fn]);
// 可用boolean类型，true为可见，false为隐藏
$().toggle(true);
</script>
二、淡入与淡出动画效果
1.fadeIn()方法与fadeOut()方法
(1).语法：（其参数含义与show()方法一致。）
<script type="text/javascript">
// fadeIn()方法语法
$().fadeIn(duration,[fn]);
// fadeOut()方法语法
$().fadeOut(duration,[fn]);
</script>
(2).与show()，hide()方法的相同点与不同点：
1>.相同点：都具有改变元素显示与隐藏状态的功能。
2>.不同点：fadeIn()方法与fadeOut()方法仅改变元素的透明度，不会修改其他属性。
2.fadeToggle()方法
fadeToggle()会动态（淡入、淡出）改变当前元素的透明度，最终切换到当前元素的可见状态。
<script type="text/javascript">
// 语法
$().fadeToggle(duration,[fn]);
</script>
3.fadeTo()方法
fadeTo()方法用于将被选元素的不透明度逐渐地改变为指定的值。
<script type="text/javascript">
// 语法
// 参数duration为动画效果的速度，参数opacity用于指定不透明值，取值范围0~1（1代表完全不透明）
$().fadeTo(duration,opacity,[fn]);
</script>
三、滑入与滑动效果
1.slideDown()方法与slideUp()方法
slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
slideUp()方法通过使用滑动效果，在元素已显示的情况下，隐藏被选元素。
<script type="text/javascript">
// 语法
$().slideDown(duration,[fn]);
$().slideUp(duration,[fn]);
// 参数说明参照hide()等方法
</script>
2.slideToggle()方法
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
<script type="text/javascript">
// 语法
// 如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
$().slideToggle(duration,[fn]);
</script>
四、自定义动画
1.简单的动画
animate()方法可以动态地改变当前元素的各种css属性。
<script type="text/javascript">
// 语法
// 参数properties使用一个“名：值”形式的对象，用于设置需要改变的css属性
$().animate(properties,[duration],[fn]);
// 示例（改变图片大小）
$("img").animate({"width":"280px","height":"280px"},"slow");
</script>
2.移动位置的动画
实现效果：通过animate()方法，单击页面中图片，使其在3秒内，同时像友、向下移动100px，在移动过程中透明度变为0.5。
head部分：
将图片设置为相对定位
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<style type="text/css">
img {
position: absolute;
}
</style>
</head>
body部分：
<body>
<p>
<img src="tp.jpg"/>
</p>
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).animate({
// 在原属性上累加或累减
"left":"+=100px",
"top":"+=100px",
"opacity":"0.5" // 透明度为0.5
},3000);
});
});
</script>
</body>
3.队列中的动画
“队列”动画是指在元素中执行一个以上的多个动画效果，即有多个animate()方法在元素中执行。根据这些animate()方法执行的先后顺序形成了动画“队列”。
实现效果：单击<div>后，高度、宽度先后在原有基础上扩大一倍，然后再恢复。
head部分：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div {
border: 1px solid blue;
width: 50px;
height: 50px;
font-size: 13px;
padding: 5px;
}
</style>
</head>
body部分：
<body>
<div>队列中的动画</div>
<script type="text/javascript">
$(function() {
$("div").click(function() { // div块单击事件
$(this).animate({height:100},"slow") // 第1列
.animate({width:100},"slow") // 第2列
.animate({height:50},"slow") // 第3列
.animate({width:50},"slow") // 第4列
});
});
</script>
</body>
五、停止动画
stop() 方法：停止当前正在运行的动画，并立即进入下一个动画。
<script type="text/javascript">
// 语法
// clearQueue参数表示是否清空为执行完的动画队列，gotoEnd参数表示是否立即完成正在执行的动画
$().stop([clearQueue][gotoEnd]);
// 使用方法(参数均为可选参数，boolean类型)
$().stop(); // 立即停止当前正在执行的动画，以当前状态执行接下来的动画
$().stop(false,true); // 立即完成正在执行的动画，并开始执行动画队列中的下一个动画
$().stop(true,true); // 立即完成正在执行的动画，并清空当前元素的动画队列
</script>
