在下面这段代码实现的动画中，元素的width和height是同时改变的。如果我们想要“先”改变宽度，“后”改变高度的话，这种方式就没办法实现了，而需要借助队列动画才可以实现。
$("div").click(function(){
$(this).animate({"width":"100px",height:"100px"});
})
在jQuery中，队列动画，指的是元素按照一定的顺序来执行多个动画效果。
语法：
$().animate().animate().…….animate()
说明：
队列动画，其实就是按照animate()方法调用的先后顺序来实现的，原理非常简单。
举例：队列动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("div").click(function () {
$(this).animate({ "width": "150px"}, 1000).animate({ "height": "150px" }, 1000);
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
默认情况下，预览效果如下图所示。
当我们点击div元素后，此时预览效果如下图所示。
分析：
在这个例子中，元素会先改变宽度，然后再改变高度。也就是执行完第一个animate()方法后，才会去执行第二个animate()方法。
举例：复杂的队列动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:50px;
height:50px;
background-color:lightskyblue;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("div").click(function () {
$(this).animate({ "width": "150px", "height": "150px"}, 1000).fadeOut(1000).fadeIn(1000);
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
默认情况下，预览效果如下图所示。
当我们点击div元素后，此时预览效果如下图所示。
分析：
这里实现了一个比较复杂的队列动画：第1个动画是用animate()方法改变元素的宽高；第2个动画是用fadeOut()方法实现元素的淡出效果；第3个动画是用fadeIn()方法实现元素的淡入效果。
可能小伙伴会问：“队列动画不是按animate()方法的先后顺序执行的吗？为什么像fadeOut、fadeIn()这种也能加入到动画队列中呢？”这是因为fadeOut、fadeIn()也属于动画，本质上也是使用animate()来实现的。
在jQuery中，队列动画可以是任何动画形式，包括：
- （1）显示与隐藏
- （2）淡入与淡出
- （3）滑上与滑下
- （4）自定义动画
