Question

根据下面的代码，在第一个动画的回调函数中有一个字体大小的动画。它应该在第一个动画完成时执行。实际上，在第一个动画完成后执行字体大小动画。通常，在某个动画完成后应该执行一个排队的动画，并且还应该同时执行前一个动画的回调函数。但在这种情况下，为什么2个排队的动画从未被执行过？（排队的动画被完全删除）是不是因为字体大小动画的.stop(true)功能？原因是什么？那个执行过程是什么？

＆＃13;

$(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
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

$(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;
}

Answer 2

在每个动画的回调动画中添加这些排队的动画

$(document).ready(function() {
  $("div").animate({
    height: "300px"
  }, 3000, "linear", function() {
    $(this).stop(true).animate({
      fontSize: "50px"
    }, 3000, "linear", function() {
      $("div").animate({
        height: "50px"
      }, 3000, "linear", function() {
        $("div").animate({
          width: "200px"
        }, 3000, "linear"); //The queued animation
      }); //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>

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

2 个答案: