Javascript 添加和设置div动画

我试图一步一步地创建div框，并在按下按钮时对它们进行多次动画处理。我创建了一个运行的示例代码，一切都很顺利。它向右移动到endhost，然后再向左移动到其原始位置。我的演示可以在这里找到： 我想模拟TCP，具体如下所示： 现在我想知道当按下按钮时的每一步，以及在同一步中的div之间，它们移动时应该有延迟，以便在设置动画后可以区分它们。有人能帮我吗

    $(document).ready(function(){
  $("button").click(function(){
  var d=$("#t");
  var number=$("#number1").val();
  var speed=2000;

//  if(state==true){
        d.animate({left:'+=230px'}, speed);
        d.animate({left:'+=230px'}, speed);
        d.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4, "swing", function(){
            $('#span').fadeOut(500, function() {
                $(this).text('a1').fadeIn(500);
            });
        });
        d.delay(1000).animate({left:'-=230px'}, speed);
        d.animate({left:'-=230px'}, speed);
        d.fadeOut();

//        }
  });
});

---

因此，为了澄清：您希望多个绿色小框合并为一个，然后开始制作动画。每次用户单击“应用”时，都会显示一个框按钮是吗？@DamienBlack是的，但是第一次点击，第一个DIV，第二次点击下两个DIV，然后再次点击，所以下四个DIV应该go@oGeez你的链接只是显示一个文本！！此时此刻，速度并不重要。让我们首先关注DIV的创建，比如