Javascript CSS同时设置.fadeOut（）和宽度的动画

我使用float:left使多个div元素彼此相邻。现在，当jQuery使用fadeOut（）隐藏一些div元素时，我希望其余的div使用CSS转换向左动画。现在，他们只是跳过去

下面是一个小例子：

<div>
  <div id="a" style="float:left;width:50px;height:50px">
  <div id="b" style="float:left;width:50px;height:50px">
  <div id="c" style="float:left;width:50px;height:50px">
  <div id="d" style="float:left;width:50px;height:50px">
  <div id="e" style="float:left;width:50px;height:50px">
  <div id="f" style="float:left;width:50px;height:50px">
</div>

---

现在，当调用c.fadeOut（）时：d，e，f应该向左设置动画。如何实现这一点？

您是否尝试将CSS转换添加到您的div中

像这样的东西应该能奏效

div {
      transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out; /* For IE */
}

---

具有任何效果或计时。

您需要使用

animate（）

将宽度和不透明度都设置为0。这里有一个

---

单击后，可以将背景色设置为透明，使其不显示，然后将div的宽度设置为0px。动画完成后，如果以后要对其执行其他操作，请将其隐藏，使其仍存在于DOM中：

$('.container div').on('click', function(){
    $(this).css({
        'background-color':'transparent'
    }).animate({'width':'0px'}, 400, 'linear', function(){
        $(this).fadeOut();
    });
});

查看JSFIDLE：

$('.container div').on('click', function(){
    $(this).css({
        'background-color':'transparent'
    }).animate({'width':'0px'}, 400, 'linear', function(){
        $(this).fadeOut();
    });
});