1

ページに 3 つの div があります。

ここでサンプルを見ることができます-

フィドル

このページでは、クリック時に div をフェードしています。私が仮定したことによると、すべてがうまくいきます。

div タブをクリックすると、すべての兄弟がフェードアウトし、[すべて表示] ボタンをクリックすると再びフェードインします。

div が非表示になると、デフォルトである左の位置になります。しかし、クリックした div は常にページの中央に移動する必要があります。だから私はそれに2番目の子のインデックス位置を与えようとしましたが、それはうまくいきません。

途中でボックスを移動するための2番目の子のインデックス位置を取得するにはどうすればよいですか?

jQuery -

$(function () {
        var index = $('.span4:nth-child(2)').index();
        $('.container .row-fluid .span4 ').click(function () {
            $(this).show().siblings().fadeOut();
            $(this).css('margin', index);
        });
        $('.show-all').click(function () {
            $('.span4').fadeIn();
        });
    });
4

2 に答える 2

7

これを試して

http://jsfiddle.net/YrsAL/3/

.container{
    text-align:Center;     
}
于 2013-07-24T07:40:32.267 に答える
0

.index() の代わりに .position() を使用する必要があるかもしれません

$(function () {
    var index = $('.span4:nth-child(2)').position().left;
    var left = $('.span4:nth-child(2)').position().left;
    var top = $('.span4:nth-child(2)').position().top;
    $('.container .row-fluid .span4 ').click(function () {
        $(this).show().siblings().fadeOut();
         $(this).css('margin-left', left);
    });
    $('.show-all').click(function () {
         $('.span4').css('margin', "auto");
        $('.span4').fadeIn();
    });
});

http://jsfiddle.net/YrsAL/9/

于 2013-07-24T08:48:05.867 に答える