Moving adjacent divs smoothly when div is hiding

Question

Script Link

When I click on the green div, everything is hidden, but the green div is sluggish, like in, it goes right next to the first green div with a jerky motion. Is it possible to smooth the transit so that it glides and takes its places 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 can switch your fadeout() to hide()

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

Updated fiddle .

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/

Make an animation, clear only the fields and paddings, and also increase the width to 0, so adjacent divs move along

Answer 3

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

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

If you are sharing with each other, you can animate height to zero(0) .

Answer 4

You can try the following:

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

OR

 this:$('.green').click(function(){ $('.others').hide("literal"); });