从页面删除其他元素后对浮动元素进行动画处理

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;
}

这是一个示例链接。

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");
})

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