当div移动以填充淡出的其他div所留下​​的空白空间时，如何为div设置动画

Question

我有一组div，每个div对应一组类别。当我点击一个过滤器时，这将改变div的类，并根据这些类别使它们变得易碎或隐藏。我控制div如何淡入/淡出并且它们缓慢而漂亮但每次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()代替fadeOut()：

$('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/