new_position

by Douglas Duhaime

HTML

<div class="addItem">ADD ITEM</div>
<div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>   
</div>

CSS

.element{
	position: relative;
	margin: 10px 10px;
	float: left;
	width: 85px;
    height: 132px;
    background: grey;
}

.element:hover { background: red; }
.container{
    width: 420px;
    margin: 0 auto;
    overflow: hidden;
    
}

.addItem{
    width: 420px;
    height: 30px;
    margin: 10px auto;
    background: orange;
    text-align: center;
    font: 15px Arial;
    line-height: 30px;
}

JavaScript

$('.element').click(function(){
    $(this).animate({
        opacity: '0'
    }, 400, function(){
        $(this).animate({
            margin: '10px 0',
            width: 0
        }, 400, function(){
            $(this).remove();
        });
    });
});

$('.addItem').click(function(){
    $('.container').append('<div class="element"></div>');
});