Geek asks and answers

Adding DIVs Step by Step ... 1, 2, 3, 4, 8, 16

I am trying to create div boxes step by step and animate them several times at the click of a button. I have a startup code and everything is going well. It goes straight to the end, and then returns to its original place. This is basically what I'm doing, as well as a demo can be found here: http://jsfiddle.net/LSegC/1/

Now what I want to do is increase the number of animated DIVs one at a time (as of now) to 3 Divs, but then have an exponential increase in the total number of DIVs. Thus, the total number of animated DIVs will be 1, 2, 3, and then 4, 8, 16, etc.

Remember, my problem is not that the number is displayed inside the DIV, in fact, how many DIVS are created! So I want, for example, 8 DIVs, numbered from 1 to 8 animated. Hopefully now clear.

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

});

+3
source share
2 answers

EDIT

Your code was too complex to manipulate, as I did, I recreated all of this: HTML:

<img id="streamline1" src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-04-48.png" />
<img id="LAN" src="https://cdn1.iconfinder.com/data/icons/ecqlipse2/NETWORK%20-%20LAN.png" />
<img src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-04-48.png" id="streamline" />
<div id="mid"></div>
<div id="bottom"></div>
<div>Speed (mS):
    <input value="500" id="speed" type="number" style="position: relative"></input>
    <button>Apply!</button>
    <!-- dynamic area -->
    <div class="packets"></div>
</div>

JS:

$(document).ready(function () {

    var count = 0;
    var items = 0;
    var packetNumber = 0;
    var speed = 0;
    $("button").click(function () {

        if (count < 4) {
            items = items + 1;
            count++;
        } else {
            items = items * 2;
        }

        speed = $("#speed").val();
        createDivs(items);
        animateDivs();
    });

    function createDivs(divs) {
        packetNumber = 1;
        var left = 60;
        for (var i = 0; i < divs; i++) {
            var div = $("<div class='t'></div>");
            div.appendTo(".packets");
            $("<font class='span'>" + packetNumber + "</font>").appendTo(div);
            packetNumber++;
            div.css("left",left+"px");

            div.hide();
            left += 20;
        }
    }

    function animateDivs() {
        $(".t").each(function () {
            var packet = $(this);

            packet.show();

            packet.animate({
                left: '+=230px'
            }, speed);

            packet.animate({
                left: '+=230px'
            }, speed);

            packet.animate({
                top: '+=20px',
                backgroundColor: "#f09090",
                text: '12'
            }, speed / 4, "swing", function () {

                $('.span').fadeOut(100, function () {

                    $(this).text(function () {
                        return 'a' + $(this).text().replace('a', '');
                    }).fadeIn(100);

                });

            });
            packet.delay(1000).animate({left:'-=230px'}, speed);
            packet.animate({left:'-=230px'}, speed);
        }).promise().done(function(){
        $(".packets").empty();});

    }
});

CSS

#bottom {
    border: 1px dashed gray;
    position: absolute;
    left: 55px;
    height: 20px;
    width: 500px;
    opacity: 0.5;
    top: 30px;
    z-index=-1;
}
#mid {
    border: 1px dashed gray;
    position: absolute;
    left: 55px;
    height: 20px;
    width: 500px;
    opacity: 0.5;
    top: 10px;
    z-index=-1;
}
.t {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 60px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-color: lightgreen
}
#streamline {
    width: 50px;
    height: 50px;
    right: 0px;
    position: fixed;
    left: 548px;
}
#streamline1 {
    left: 0px;
    width: 50px;
    height: 50px;
}
#LAN {
    width: 50px;
    height: 50px;
    left: 275px;
    position: fixed;
}
.packets {
    display: inline;
}

FIDDLE: http://jsfiddle.net/54hqm/3/

+1
source

It was also difficult for me to follow the code, but I dropped it a bit and came up with a “one-sided” “empirical” approach. Fiddle

The speed can be changed by changing the increment (inc), but there are many methods that you can use.

, ""? div , , , 50%, .

JS

$("button").click(function() {
  var speed = 1000;
  var d = $('.mover');
  d.show();
  var inc = 1;
  for (var i=0; i<290; i=i+inc)
  {
   d.animate({   left: i,
               easing: 'linear'}, 1);
   if (inc < 11)
     {
      inc = inc + 1;
      } else {
      inc = inc - 1;
               }
   }
});
0

More articles:


All Articles