隐藏元素后滑动浮动div

我有一行4 divs左侧浮动。点击后，div消失，其兄弟姐妹向左移动并占据其位置。不过，我有因为剩余的“申报单”平滑这部动画挣扎只是跳转到新的位置，而不是滑过隐藏元素后滑动浮动div

有什么办法来平滑过渡，最好不使用特定的值，即：margin-left: x pixels;？此外，是否有可能做到这一点与CSS转换？

2013-10-09 cat-t

http://www.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。） –

您可以切换与hide()

这里是更新fiddle

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

    }) 
});

编辑

其中一个方向是包装盒到无形的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); 
     }); 

    }); 
});

来源

2013-10-09 19:31:39

是的，这是我原来的，但我一直试图将它分成两个事件;淡出div，然后滑动剩下的div。 –

@ cat -t检查答案的编辑。让我知道这是否会为你工作 –

这是完美的，谢谢Bojana！ –

这是你在找什么？或者你是否真的希望块滑动？

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

来源

2013-10-09 19:32:48

我正在寻找所有块滑动，所以如果第一个div被点击并消失，剩下的3个滑块在左边。 –

好吧，我会在回家后更多地处理这段代码，但我想我可能能够实现您想要的目标！请参阅http://jsfiddle.net/Josh_Powell/G9x8V/9/ –

我会去与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%;} 
}

然后你” d必须更新JavaScript，以便在点击时发生，而不是在页面加载时，并且您可能希望在该动画中放置更多点并切换到px。

来源

2013-10-09 19:42:19

隐藏元素后滑动浮动div

回答

相关问题