Question

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

我的问题是如何添加我的jQuery脚本，以便慢慢居中点击的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);
        }

    });
});

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

1 个答案: