如何逐步增加动画 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 的数量？ -谢谢

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/