تغییر محل div ها بوسیله javascript

Question

سلام من یک سری خونه جدول مانند دارم میخوام با کلیک کردن روی هر کدوم اون مستطیل پاک بشه و یکی دیگه چایگزینش بشه

این کد رو نوشتم ولی الان مشکل اینه که اگر جعبه سمت راست پاک بشه برنامه درست کار نمی کنه ممنون میشم کمک کنید ..

HTML

<div class="container">
    <div id="item1" class="item">Test1</div>
    <div id="item2" class="item">Test2</div>
    <div id="item3" class="item">Test3</div>
    <div id="item4" class="item">Test4</div>
    <div id="item5" class="item">Test5</div>
    <div id="item6" class="item">Test6</div>
</div>

CSS

.container {
    width: 500px;
}
.item {
    float: left;
    width: 48%;
    min-height: 187px;
    border: 1px solid black;
    margin: 0 1% 1em 0;
    position: relative;
    background: white;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
}
.hide {
    width: 0px;
    height: 100%;
    opacity:0;
    margin:0;
    padding:0;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

java script

var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i ++)
{
    items[i].onclick = function() {
        this.classList.toggle('hide');
    }
};

تست کد بالا :

http://jsfiddle.net/CUzNx/61/

Answer 1

از animate استفاده کن

    $(".item").click(function(){
        $(this).animate({
            width: '0px',
            height:'100%',
            opacity:'0',
            margin:'0',
            padding:'0',
            left: '0px' //
        });
    });

تست

http://jsfiddle.net/kryvp/1/