CSS 为 .fadeOut() 和宽度设置动画答案

【问题标题】：CSS animate both .fadeOut() and widthCSS 为 .fadeOut() 和宽度设置动画
【发布时间】：2013-08-16 11:24:35
【问题描述】：

我有多个相邻的 div 元素使用 float:left。现在，当一些 div 元素被 jQuery 使用fadeOut() 隐藏时，我希望其余的 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 应该向左移动。我怎样才能做到这一点？

【问题讨论】：

标签： javascript css

【解决方案1】：

您需要使用animate() 将宽度和不透明度都设为0。这是jsFiddle

$(document).ready(function () {

    $('.MyClass').click(function () {

        $(this).animate({'width': 0, 'opacity': 0}, 2000, 
                        function () {$(this).hide(); });
    });
});

【讨论】：

【解决方案2】：

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

这样的事情应该可以解决问题。

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

无论效果或时机。

【讨论】：

【解决方案3】：

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

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

查看 jsfiddle： http://jsfiddle.net/jjdMN/1/

【讨论】：