隱藏元素後滑動浮動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

回答

相關問題