jQuery/CSS3 将元素缓动到淡入淡出后留下的空白区域

Question

我在一个网站上工作，该网站将有一个水平排列的居中元素列表。用户可以根据实际元素显示下方的一些 anchor 来过滤元素。我在这里设置了一个 jsfiddle 来演示基本功能:http://jsfiddle.net/T6N9G/1/

在上面的示例中，本应消失的元素会慢慢淡出，这很好。问题是当隐藏元素最终得到 display: none 时，其他元素“跳”来填充留下的空间。我正在寻找一种方法来将可见元素缓和到新空间中。

在上面的 fiddle 中，以下几行需要调整(或者，如果可能，可以将 CSS3 过渡应用于元素):

$("a").on("click", function(event){
    event.preventDefault();
    var color = $(this).attr("class");
    var $show = $(".container .item." + color);
    var $hide = $(".container .item:not(." + color + ")");

    $show.fadeIn();  // Change Me?
    $hide.fadeOut(); // Change Me?
});

我对元素有完全控制权，但我希望避免包含杂项。 JS 库来完成这样的小任务。是否有 jQuery UI 效果或 CSS3 转换可以满足我的需要？

Answer 1

您可以使用动画链接来分别为不透明度设置动画。

http://jsfiddle.net/CT5Ys/1/

$show.show(200).animate({opacity: 1}, {duration: 200});
$hide.animate({opacity: 0}, {duration: 200}).hide(200);