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

Question

我遇到这样一种情况，当单击按钮时，divs 会以一定的 class 淡出。例如，如果有人要单击 "Hide Red,"，我会使用 jQuery 来隐藏所有 div 和 class 的 "red." 这些 div s 向左浮动，宽度为 33%。当红色被隐藏时，其他 divs 与 class "blue" 填充 space 为 "red" divs刚刚淡出。这就是我想要发生的事情，但我想让剩余的 div 顺利过渡到缺失的 space 而不是 "jumping" 中来填充缺失的 space .有没有办法使用 jQuery 来做到这一点？

以下是我为使 div 淡出所做的全部工作：

JAVASCRIPT

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

方框的格式如下：

CSS

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

Here是一个link的例子。

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

代码笔http://codepen.io/anon/pen/YywBNQ

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

Animate floating elements after removing other elements from page

html

javascript

css

jquery

jquery-animate