jquery动画队列的自动添加和执行

$(function() {

    $('#btn').click(function(){

      $(".test").animate({width:'+=256'},2500);

      $(".test").animate({height:'+=256'},2500);

      $(".test").queue(function(){ 

          $(this).css({'backgroundColor':'black'});

          // $(this).dequeue(); //顺利执行

      });

      $(".test").dequeue(); 

      $(".test").animate({width:'-=256'},2500);

      $(".test").animate({height:'-=256'},2500);

    });

  });

上面的代码会让前两个动画并行执行, 后续的动画却不会.

由此引发了我的两个问题:

  1. 一个动画包括了进入队列和动画执行两个步骤. 诸如$(".test").animate({width:'+=256'},2500);这样添加的动画, 是先把所有的动画添加到动画队列, 再执行吗? 
    可不可以理解为$(".test").animate({width:'+=256'},2500);这行代码只是为动画队列添加了一个动画, 而并不是执行这个动画? 那这个动画的执行又是在哪一步实现的?

  2. 动画队列都是无阻塞的, 而为队列添加函数(.queue方法)并不是一个动画, 为什么没有提前添加到动画队列中, 而是等前两个动画都执行完了才添加.

问题描述得有点逻辑不清晰, 等我继续思考一下怎么把他描述清楚, 望能大概理解我意思的大神不嫌弃解答一下, 谢谢!


一只甜甜圈
浏览 743回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript