从页面中删除其他元素后动画浮动元素

Question

我有一种情况，当单击按钮时，我会淡出具有特定类的 div。例如，如果有人要单击“隐藏红色”，我会使用 jQuery 隐藏所有具有“红色”类的 div。这些 div 向左浮动，宽度为 33%。当红色被隐藏时，其他具有“蓝色”类的 div 填充刚刚淡出的“红色”div 的空间。这就是我想要发生的事情，但我想让剩余的 div 顺利过渡到缺失的空间，而不是“跳入”以填充缺失的空间。有没有办法使用 jQuery 来做到这一点？

下面是我为淡出 div 所做的一切：

JAVASCRIPT

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

下面是盒子的格式：

CSS

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

Here 是一个示例链接。

Answer 1

尝试使用.animate() 将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");
})

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