jquery - 将 div 移动到索引位置

Question

我的页面上有三个 div。

您可以在此处查看示例-

小提琴

在这个页面上，我在点击时淡化 div。根据我的假设，一切都很好。

现在，如果我单击一个 div 选项卡，它的所有同级都将淡出并再次淡入显示所有按钮单击。

当 div 隐藏时，它会出现在默认的左侧位置。但我希望我点击的那个 div 应该总是在页面的中间。所以我尝试给它第二个孩子的索引位置，但这不起作用。

如何获得第二个孩子的索引位置以在中间移动框？

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

Answer 1

尝试这个

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

.container{
    text-align:Center;     
}

Answer 2

也许你应该使用 .position() 而不是 .index()

$(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/