jquery - 隐藏兄弟姐妹jQuery后缓慢居中div

Question

我有很长的 div 包含我网站上一些用户的图像。在隐藏其兄弟姐妹后，我似乎无法弄清楚如何缓慢地将 div 居中。

http://jsfiddle.net/sXpT3/

我的问题是添加我的 jQuery 脚本，以便在隐藏其他 div 后缓慢居中单击的 div。

我尝试使用动画，但如果我不将每个 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

通过仅将其淡出而不隐藏它然后对隐藏进行动画处理，我可以完成您正在寻找的效果。
小提琴： 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);
        }

    });
});