在隐藏兄弟姐妹jQuery之后,中心慢慢地

我有很长的div包含我网站上的一些用户的图像.
我似乎无法弄清楚如何在隐藏其兄弟姐妹后慢慢将div放在中心位置.

http://jsfiddle.net/sXpT3/

我的问题是如何添加我的jQuery脚本以慢慢居中点击的div,
隐藏其他人之后.

我试图使用animate,但如果我没有以绝对模式定位每个div,那似乎不起作用.

CSS

.users {
    width:100%;
    text-align:center;
    height: 100px;
    top:50%;
    margin-top:-100px;
    position:absolute;
}

.user {
    display:inline-block;
    *display:inline;
    width:90px;
    height:90px;
    margin:0 10px;
    border-radius:50px;
    border:5px solid rgba(255,255,0.9);
}

jQuery的

$(function() {
    $('.user').click(function() {

        if ($(this).hasClass('active')) {
            $('.user').not(this).fadeIn(200);

            $(this).removeClass('active');
        } else {

            $('.user').not(this).fadeOut(200);

            $(this).addClass('active');
        }

    });
});

HTML

<div class="users">
    <div style="BACkground:#0F9" class="user">
    </div>
    <div style="BACkground:#0CF" class="user">
    </div>
    <div style="BACkground:#F66" class="user">
    </div>
    <div style="BACkground:#F09" class="user">
    </div>
    <div style="BACkground:#FCF" class="user">
    </div>
    <div style="BACkground:#996" class="user">
    </div>
</div>

$(function() {
    $('.user').click(function() {

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $('.user').not(this).show(200).fadeTo(200,1);
        } else {

            $(this).addClass('active');
            $('.user').not(this).fadeTo(200,0).hide(200);
        }

    });
});