Using css to slide elements when filling empty space - html

Question

I have several blocks of content. I slide one off to the side, then remove it. Once that is done, I want the blocks below it to slide up and take its place.
JSFiddle Example
HTML
<div id="container">
<div id="elem1" class="item one">
Element 1
</div>
<div id="elem2" class="item two">
Element 2
</div>
<div id="elem3" class="item three">
Element 3
</div>
</div>
CSS
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
}
.item {
height: 150px;
width: 200px;
margin-bottom: 20px;
}
.closed {
-webkit-transition: all .75s ease;
-moz-transition: all .75s ease;
-o-transition: all .75s ease;
transition: all .75s ease;
background-color: yellow;
margin-left: 200px;
opacity: 0;
}
Javascript/JQuery
$('.item').on('click', function(){
$(this)
.addClass('closed')
.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(){
$(this).remove();
});
});
What transition can I uses so that if I click the red block, once it is removed the blue and green blocks will slide into place?

Answer 1

Working Fiddle
Give a try to this;
$(this).height(0).css({'margin':'0'});
or Probably this;
$(this).css({'margin':'0','height':'0'});
good luck!

Answer 2

You can animate with height and margin equal to 0
$('.item').on('click', function(){
var obj = $(this);
$(this)
.addClass('closed')
.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(){
obj.animate({ height: 0, margin : 0 }, 0);
});
});
Here is the fiddle link DEMO

Answer 3

You can use .animate() with time and adjust top or margin-top to move the element out of view. Once out you can remove the element and reset the top / margin-top to its original value.