javascript - 为什么这两个排队的动画从未执行过？

Question

根据下面的代码，第一个动画的回调函数中有一个字体大小动画。它应该在第一个动画完成时执行。事实上，字体大小动画是在第一个动画完成后执行的。通常情况下，一个排队的动画应该在某个动画完成后执行，并且上一个动画的回调函数也应该同时执行。但在这种情况下，为什么2个排队动画从未执行过？(排队动画全部被删除)是因为font-size动画的.stop(true)函数吗？什么原因？执行流程是怎样的？

$(document).ready(function(){
    $("div").animate({height: "300px"},3000,"linear",function(){
        $(this).stop(true).animate({fontSize: "50px"},3000,"linear");
    });    //The first animation
    $("div").animate({height: "50px"},3000,"linear");    //The queued animation
    $("div").animate({width: "200px"},3000,"linear");    //The queued animation
});

div{
    font-size: 20px;
    text-align: center;
    background-color: #F00;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello world!</div>

Answer 1

要以与第一个动画相同的方式对它们进行排队，您需要将它们作为回调传递:

$(document).ready(function(){
    $("div").animate({height: "300px"},3000,"linear",function(){
        $(this).animate({fontSize: "50px"},3000,"linear", function() {
      $("div").animate({height: "50px"},3000,"linear");    //The queued animation
      $("div").animate({width: "200px"},3000,"linear");    //The queued animation    
        });
    });    //The first animation
    
});

div{
    font-size: 20px;
    text-align: center;
    background-color: #F00;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello world!</div>