jQUery动画队列

动画顺序

jQuery 默认提供针对动画的队列功能。即如果我们在一个函数内给元素添加了多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

我们将前面的动画拆分成三个：

$box.click(function (){
    $(this).animate({
        top: "150px",
        left: 150,
        backgroundColor: "#00f"
    }, 2000, "easeInOutBack", function(){
        console.log("第一阶段完结");
    })

    $(this).animate({
        width: 500,
        height: 300
    }, 3000)

    $(this).animate({
        opacity: .2
    }, 3000)
})

拆分之前动画过程是所有样式一起运动，直至终点。拆分之后动画过程会变成：元素先改变上左边距以及颜色 -> 然后改变宽高 -> 最后改变透明度

更改三个动画的书写顺序，动画执行顺序也会改变，但都是从上往下依次执行。