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

Question

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

在上面的例子中,意味着消失的项目逐渐淡出,这很好.问题是其他元素"跳"以填充隐藏元素最终获得时留下的空间display: 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?
});

我完全控制了这个项目,但我希望避免包括misc.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);