隐藏元素后滑动浮动 div答案

【问题标题】：Slide floated divs after hiding an element隐藏元素后滑动浮动 div
【发布时间】：2013-10-09 19:21:43
【问题描述】：

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

http://jsfiddle.net/G9x8V/

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

【问题讨论】：

w3schools.com/css3/css3_animations.asp 我现在要在你的 jsfiddle 上尝试一下，但我认为它类似于：@keyframes myfirst { 0% {margin-left: 30px;} 25% {margin- left: 20;} 50% {margin-left: 10;} 100% {margin-left: 0;} } 虽然我几乎可以肯定它是可能的，但我以前从来没有搞过 css 动画。（但它不适用于旧版本的 IE。）

标签： javascript jquery html css

【解决方案1】：

您可以将fadeOut() 与hide() 切换

这是更新后的fiddle

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

     })
});

编辑

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

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);
        });

    });
});

【讨论】：

是的，这是我最初拥有的，但我一直试图将它分成两个事件；一个 div 的淡出，然后是剩余 div 的滑过。
@cat-t 查看答案的编辑。让我知道这是否适合你

【解决方案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。

【讨论】：

【解决方案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

【讨论】：

我正在寻找所有要滑动的块，所以如果第一个 div 被点击并消失，剩下的 3 个滑块向左移动。
好的，我回家后会更多地处理这段代码，但我想我可能能够实现你想要的目标！参考jsfiddle.net/Josh_Powell/G9x8V/9