jquery - 当一个 div 隐藏时平滑地移动相邻的 div

Question

Fiddle link

当我单击绿色 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

也许你可以用 hide() 切换你的 fadeout()

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


});

这是您的 fiddle已更新。