CODEWITHSUNDEEP
javascriptjquery
angel_30
angel_30

Reputation: 1

How to progressively increase the number of animated DIVs

I'm trying to animate a div box for several times when a button is pressed. It shall go right, and again right, then it comes a bit down and the text inside should change, and then it shall go left, and again left to its original place. This is my code here: http://jsfiddle.net/LSegC/ Hopefully everything is fine now.

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

//        }
  });
});

Now what I want to know how to do is that when the steps above are finished, I want to increase the number of animated divs. So next time, I want TWO such divs following eachother to animate, and when they are done, then THREE of them should go, each showing its own number. Does anyone have any clues how to progressively increase the number of animated DIVs step by step? -Thanks

Upvotes: 0

Views: 118

Answers (1)

dfsq
dfsq

Reputation: 193271

If you swithch to classes instead of id for #t, then it's easy. Try something like this:

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

Demo: http://jsfiddle.net/LSegC/1/

Upvotes: 1

Related Questions