将div移动到索引位置

Question

我的页面上有三个div。

你可以在这里看到样本 -

Fiddle

在这个页面上我点击了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/