從頁面中刪除其他元素後動態顯示浮動元素

Question

我有一種情況，當點擊某個按鈕時，我正在用某個類淡出div。例如，如果有人點擊「隱藏紅色」，我使用jQuery來隱藏所有具有「紅色」類別的div。這些div浮出，寬度爲33％。當紅色隱藏起來時，其他的「藍色」類div填充了剛剛淡出的「紅色」div的空間。這就是我想要發生的事情，但我希望剩下的div能夠平滑過渡到缺失的空間，而不是「跳躍」來填補缺失的空間。有沒有辦法使用jQuery做到這一點？

下面是所有我做褪色股利出來：

JAVASCRIPT

$(".hide_red").click(function(){ 
    $(".red").fadeOut(); 
}) 

這裏是框的格式化：

CSS

.box { 
    float:left; 
    width: 33%; 
    height: 80px; 
} 

Here是一個例子的鏈接。使用.animate()

Answer 1

嘗試設置duration到2500，"easing"到"linear"

$(".show_all").click(function(){ 
    $(".red, .blue").fadeIn(1000); 
}) 
$(".hide_red, .hide_blue").click(function(){ 
    $("." + this.className.split("_")[1]) 
    .animate({ 
    width:"toggle", 
    opacity:"toggle" 
    }, 2500, "linear"); 
}) 

codepen http://codepen.io/anon/pen/YywBNQ