Question

我使用float：left有多个div元素彼此相邻。现在，当一些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应该动画到左边。我怎样才能做到这一点？

Answer 1

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

$(document).ready(function () {

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

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

Answer 2

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

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

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

无论有什么效果或时间。

Answer 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/

CSS动画.fadeOut（）和宽度

3 个答案: