如何動畫div時，他們移動填補其他div的淡出剩下的空間

Question

我有一套divs，每個對應一組類別。當我點擊一個過濾器時，這將改變div的類並根據這些類別使它們變得易於剝奪或隱藏。我控制divs如何淡入/淡出，並且它緩慢並且很好地進行，但是每當divs消失時，那些未改變的div突然移動，以填充被隱藏的空間。

如何平滑在其他人消失並且留下空位後未隱藏的div的移動？

//Before this goes a long function that decides wich divs will get their class changed 
$('#work-container > div[class*=visible]').fadeIn('slow','swing'); 
$('#work-container > div[class*=hidden]').fadeOut('slow','swing'); 

編輯：的事情http://jsfiddle.net/Ccswn/3/小提琴

Answer 1

我建議代替​​使用animate()：

$('div').click(
    function() { 
     $(this).animate({ 
      'height': 0, 
      'opacity': 0 
     }, 750, function() { 
      $(this).remove(); 
     }); 
    });​ 

JS Fiddle demo。

---

編輯納入一個jQuery/CSS的解決方案：

更改爲.item的CSS，包括以下內容：

.item{ 
    /* other css removed for brevity */ 
    -webkit-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    transition: all 1s linear; 
} 

並更改a.hidden以下幾點：

.hidden { 
    width: 0; /* reset everything that might affect the size/visibility */ 
    height: 0; 
    padding: 0; 
    margin: 0; 
    opacity: 0; 
    -webkit-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    transition: all 1s linear; 
} 

使用以下jQuery：

// content animate 
$('#work-container > div[class*=hidden]').addClass('hidden'); 
return false; 

JS Fiddle demo。

然後，一切似乎按你的想法工作。雖然我沒有試圖按照上面的塊中的.addClass('visible')做什麼，但我放棄了它。

這確實需要一個支持CSS轉換的瀏覽器（並且支持opacity），所以它可能不適合您的使用情況。

Answer 2

可以使用show和hide方法：
http://jsfiddle.net/Ccswn/5/