Move adjacent divs smoothly when a div hides

Question

Fiddle link

When I click on the green div, everything hides, but the green div is jerky, as in, it comes right next to the first green div with a jerky motion. Is it possible to smooth transit, so that it slides and takes its places right next to the first green div?

JS:

$('.green').click(function(){
    $('.others').fadeOut();
});

CSS:

.green{ background:green; padding:10px; margin:10px; }
.red{ background:red; padding:10px; margin:10px; }
.blue{ background:blue; padding:10px; margin:10px; }
.green:hover{ cursor:pointer;}
.fade{display:none; opacity:0;}
div{ float:left; }

HTML:

<div class="green"></div>
<div class="red others"></div>
<div class="blue others"></div>
<div class="green"></div>
<div class="red others"></div>
<div class="blue others"></div>

Answer 1

Perhaps you could switch your fadeout() with hide()

$('.green').click(function(){
$('.others').hide(300);


});

Here is your fiddle updated.

Answer 2

$('.green').click(function(){
    $('.others').animate({
        "margin-left":0,
        "margin-right":0,
        "padding-left":0,
        "padding-right":0,
        width:0,
    }, 300);
});

http://jsfiddle.net/2un99/5/

Do animation, clear just margins and paddings, and animate width to 0, so adjecent divs move along

Answer 3

The trick is to remove opacity & size, then hide it.

$('.green').click(function(){
    $('.others').animate({'opacity':0},200,function(){
        $(this).animate({'width':0},200,function(){
            $(this).hide();
        });
    });
});

If you divs are below each other you can animate height to zero(0).