Question

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

有没有办法平滑过渡，最好不使用特定值，即：margin-left: x pixels;？此外，是否可以使用css转换执行此操作？

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

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

隐藏元素后滑动浮动的div

3 个答案: