Insert inline element and animated left shift

Question

I’ve been trying to solve this problem for a week now, and this seems to be the main one, so maybe I missed something.

I want to have a div centered on the screen (or its container), and then insert a second div to the right of it so that two of them are centered later (the space on each side is equal).

Inserting a second div is not a problem, but I need the first block to move to where it will be after adding a new block.
http://jsfiddle.net/rdbLbnw1/

.container { width:100%; text-align:center; } .inside { border:solid 1px black; width:100px; height:100px; display:inline-block; } $(document).ready(function() { $("#add").click(function() { $(".container").append("<div class='inside'></div>"); }); }); <div class="container"> <div class="inside"></div> </div> <input id="add" type="button" value="add"/> 

Do I need to explicitly calculate where the original box will look and then animate it, or is there a better way to do this?

Answer 1

I like your question, so decide to write this:

 $(document).ready(function() { var isInAction = false; var intNumOfBoxes = 1; var intMargin = 10; $containerWidth = $(".container").width(); $insideWidth = $(".inside").width(); $(".inside").css('margin-left',($containerWidth - $insideWidth - intMargin)/2 + 'px'); $("#add").click(function() { if (!isInAction){ isInAction = true; intNumOfBoxes +=1; $(".current").removeClass("current"); $(".container").append("<div class='inside current'></div>"); $('.inside').animate({ 'margin-left': '-=' + ($insideWidth + intMargin)/2 + 'px' }, 300, function () { $(".current").css('margin-left',($containerWidth + ((intNumOfBoxes - 2) * ($insideWidth + intMargin)))/2 + 'px'); $(".current").fadeIn(500,function(){ isInAction = false; }); }); } }); }); 

Also add this class in CSS:

 .current { display:none; } 

You do not need to change the variables in the JS code except intMargin . You can change this variable to set the field between fields.

Note. This code works fine in older browsers and does not need to support CSS3 features such as transition .

Update: Some errors, such as repeated clicks, have been fixed.

Check JSFiddle Demo

Answer 2

First, we can only animate things that have explicit numeric values, such as width, left, or margin. We cannot animate things like alignment (which actually use the same margin property, but implicitly, never mind). Therefore, if we know the width of the inserted div, just add it to our container.

1) Let the very center of the container and add a transition to it

 .container { width: 102px; /* set explicit width; 102 - because of borders */ margin: auto; /* set margin to 'auto' - that will centre the div */ transition: width 0.5s; } 

2) Then increase the width when add div

 $(".container").width($(".container").width() + 102); 

3) But wait! If we add a div to a container too narrow, it will be added from the bottom to the right. Therefore, we need another container installed for the appropriate width before.

See the final example in JSFiddle .

BTW, remove all line breaks and tabs from your code when you use the inline block, because this will cause spaces between your blocks.