As I have multiple blocks of content, I slide one to the side and then remove it. Once that is completed, I want the blocks below it to smoothly move up and fill the space.
Check out this JSFiddle Example for reference
HTML Code
<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 Styles
.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 Functionality
$('.item').on('click', function(){
$(this)
.addClass('closed')
.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(){
$(this).remove();
});
});
If you are wondering how to make the blue and green blocks smoothly slide into place once the red block is clicked and removed, what kind of transition can be used?