1

我使用 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 应该向左移动。我怎样才能做到这一点？

4

3 回答 3

1

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

$(document).ready(function () {

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

        $(this).animate({'width': 0, 'opacity': 0}, 2000, 
                        function () {$(this).hide(); });
    });
});
于 2013-07-29T18:13:13.257 回答
-1

单击时，您可以将背景颜色设置为透明，使其不显示，然后将 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/

于 2013-08-01T21:34:02.420 回答
-1

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

像这样的东西应该可以解决问题。

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

无论效果或时机如何。

于 2013-07-29T18:09:39.617 回答