jQuery/CSS3 easing elements into empty space left after a fade

Question

I'm working on a site where there will be a centered list of elements, laid out horizontally. The user is able to filter the elements based on some anchors below the actual element display. I've set up a jsfiddle demonstrating the basic functionality here: http://jsfiddle.net/T6N9G/1/

In the example above, the items that are meant to disappear slowly fade out, which is fine. The problem is that the other elements "jump" to fill the space that is left when the hidden elements finally get display: none. I'm looking for a way to ease the visible elements into the new space.

In the fiddle above, the following lines need adjustment (or, if possible, a CSS3 transition can be applied to the elements):

$("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?
});

I have full control over the project, but am hoping to avoid including misc. JS libraries to accomplish minor tasks like this. Is there a jQuery UI effect, or a CSS3 transition that will do what I need?

Answer 1

You can use animation chaining to animate the opacity separately.

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

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