If element moves, how to animate that movement with css or jquery?

Question

I got some elements, and when an event is triggered one of them is removed or added to the DOM, when this happens the rest of the elements moves around to find their right place on the DOM, what I want is to animate that movement.

Any ideas? I would like to only use CSS if it's possible.

Note that when clicked the button, the element 2 goes off or on and the others move's, I want that movement animated.

Here is my code

  $('button').click(function(){ element = $('#dos').is(":visible"); if(!element){ $('#dos').show(); } else{$('#dos').hide();} }) 

 section{ margin:auto; display:block; text-align:center; } #uno{ width:200px; background:rgba(255,229,0,1.00); height:100px; display:inline-block; } #dos{ width:200px; background:rgba(0,255,60,1.00); height:100px; display:inline-block; } #tres{ width:200px; background:rgba(232,0,255,1.00); height:100px; display:inline-block; } button{ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section> <div id="uno">1</div> <div id="dos">2</div> <div id="tres">3</div><br> <button>Click</button> </section> 

Answer 1

If you want it to be done in CSS, then work with .addClass() / .removeClass() instead of .show() and .hide() . Learn about keyframes – it's easy, intuitive and gives full control over CSS animations. It's as easy as:

@keyframes hide-animation {
  to {
    width: 0%;
    visibility: hidden;
  }
}

.hidden {
   animation: hide-animation .3s linear forwards;
}

You can bind any animation you want to the class you are adding. Here's your JSFiddle with working hide animation.

Answer 2

It's hard for me to give an exact answer without knowing what kind of movement you want but I'll take a stab at it.

One general solution is to put the element you are hiding/showing in a container div, and then animate the width or height of the container div. Let me see if I can give you an example for vertical:

HTML:

<div id="uno">1</div>
<div id="dos-container">
    <div id="dos">2</div>
</div>
<div id="tres">3</div>

CSS:

#uno{
    height:100px;
}
#dos{
    height:100px;
}
#dos-container{ /* same height as dos if starting visible, if starting hidden set to 0*/
    height:100px;
}
#tres{
    height:100px;
    }

JS(with jquery):

$('button').click(function(){
    element = $('#dos').is(":visible");
    if(!element){
        //animate container height to match content div height
        $('#dos-container').animate({height: "100px")},500); //500 is the speed of the animation
        //show content in container
        $('#dos').show();
    }
    else{
        //animate container height to 0
        $('#dos-container').animate({height: "0px")},500);
        //then hide content div
        $('#dos').hide();
    }   
})