当div隐藏时,顺利移动相邻的div

Question

小提琴链接

当我点击绿色div时,一切都隐藏起来,但是绿色div是生涩的,就像在第一个绿色div旁边的一个生涩的动作.是否可以平滑运输,以便它滑动并占据第一个绿色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

也许你可以转换你fadeout()的hide()

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


});

这是你的小提琴更新.

Answer 2

你可以试试这个：

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

或者

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