javascript - 隐藏元素后滑动浮动 div

Question

我有一排 4divs向左浮动。单击时，div 消失，其兄弟姐妹向左移动并占据其位置。但是，我正在努力平滑这个动画，因为剩余的“div”只是跳到他们的新位置而不是滑过

http://jsfiddle.net/G9x8V/

有什么方法可以平滑过渡，最好不使用特定值，即：margin-left: x pixels;？另外，是否可以使用 css 转换来做到这一点？

Answer 1

你可以fadeOut()用hide()

这是更新的小提琴

$(function(){
    $('.box').on('click', function(){
        $(this).hide(1000);

     })
});

编辑

其中一个方向是将盒子包装成不可见的 div，这些 div 在盒子淡出后会隐藏起来。这是更新的文件

HTML

<div class="container">
<div class="outer-box">
    <div class="box">1</div>
</div>
<div class="outer-box">
    <div class="box">2</div>
</div>
<div class="outer-box">
    <div class="box">3</div>
</div>
<div class="outer-box">
    <div class="box">4</div>
</div>
</div>

CSS

.container {
width: 600px;
}
.box {
width: 100%;
height: 120px;
background: red;
float: left;
}

.outer-box {
width: 20%;
height: 120px;
margin-left: 2.5%;
float: left;
}

jQuery

$(function(){
    $('.box').on('click', function(){
        $(this).fadeOut(1000, function(){
            $(this).parents('.outer-box').hide(1000);
        });

    });
});

Answer 2

我会接受 Bojana 的回答，但我会给你另一个选择，因为我做了一些工作（它没有完成，实现不像 bojana 的那么容易）：

http://jsfiddle.net/G9x8V/4/

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {margin-left: 18%;}
25%  {margin-left: 12%;}
50%  {margin-left: 6%;}
100% {margin-left: 0%;}
}

然后您必须更新 javascript，使其在点击时发生，而不是在页面加载时发生，您可能希望在该动画上添加更多点并切换到 px。

Answer 3

这是你想要的？或者你真的想让积木一起滑动吗？

CSS3 轻松

-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;

JSFIDDLE

jQuery

$(function(){
  $('.box').on('click', function(){
      $(this).fadeOut(function() {
          $(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000); 
      });
  })
});

JSFIDDLE jQuery