4

私のウェブサイトには、一部のユーザーの画像を含む長い div があります。兄弟を隠した後、divをゆっくりと中央に配置する方法がわかりません。

http://jsfiddle.net/sXpT3/

私の質問は、他のものを隠した後、クリックされた div をゆっくりと中央に配置するための jQuery スクリプトを追加する方法です。

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>
4

1 に答える 1

3

フェードアウトするだけで非表示にせず、非表示をアニメーション化することで、探している効果を実現できます。
フィドル: 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);
        }

    });
});
于 2013-04-17T15:42:18.737 に答える