如何逐步增加动画DIV的数量

Question

按下按钮时，我试图多次为div框设置动画。它应该向右，然后再向右，然后它有点下降，里面的文本应该改变，然后它将向左移动，并再次离开它原来的位置。这是我的代码：http://jsfiddle.net/LSegC/希望现在一切都很好。

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

//        }
  });
});

现在我想知道怎么做的是，当上面的步骤完成后，我想增加动画div的数量。所以下次，我希望两个这样的div跟随彼此进行动画制作，当它们完成时，它们中的三个应该去，每个都显示自己的数字。有没有人有任何线索如何逐步增加动画DIV的数量？ -Thanks

Answer 1

如果切换到#t的类而不是id，那么这很容易。尝试这样的事情：

$(document).ready(function(){
  $("button").click(function() {

      var d = $(".t").fadeIn();
      var speed = +$("#number1").val();

      d.animate({left:'+=230px'}, speed);
      d.animate({left:'+=230px'}, speed);
      d.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4, "swing", function() {
          $('.span', this).fadeOut(100, function() {
              $(this).text(function() {
                  return 'a' + $(this).text().replace('a', '');
              }).fadeIn(100);
          });
      });
      d.delay(1000).animate({left:'-=230px'}, speed);
      d.animate({left:'-=230px'}, speed);
      d.fadeOut().promise().done(function() {
          d.last().after(function() {

              var top = +$(this).css('top').replace('px', ''),
                  number = +$(this).data('number') + 1,
                  $clone = $(this).clone();

              $clone.data('number', number).css('top', top + 20);
              $clone.find('.span').text(number);

              return $clone;
          });

          d.find('.span').text(function() {
              return $(this).text().replace('a', '');
          });
      })
  });
});

演示：http://jsfiddle.net/LSegC/1/