jQuery / CSS3将元素放入空白区域后淡入淡出

我正在一个网站上工作,这里会有一个集中的元素列表,横向排列.用户能够基于实际元素显示下方的一些锚点来过滤元素.我在这里设置了一个演示基本功能的jsfiddle： http://jsfiddle.net/T6N9G/1/

在上面的例子中,意味着消失的项目逐渐淡出,这很好.问题是其他元素“跳”以填充隐藏元素最终显示时留下的空间：none.我正在寻找一种方法来将可见元素放入新空间.

在上面的小提琴中,需要调整以下行(或者,如果可能,可以将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?
});

我完全控制了这个项目,但我希望避免@L_536_11@misc. JS库来完成这样的小任务.是否有jQuery UI效果,或CSS3过渡,将满足我的需求？

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