jquery - 隐藏 sibling jQuery 后缓慢居中 div

Question

我有一个很长的 div，其中包含我网站上一些用户的图像。我似乎不知道如何在隐藏其 sibling 后慢慢地将 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,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>

Answer 1

通过仅将其淡出而不隐藏它，然后对隐藏进行动画处理，我可以实现您正在寻找的效果。
fiddle :http://jsfiddle.net/sXpT3/1/
JS:

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

    });
});