单击 div 调整大小时的 jQuery 灯箱效果

Question

我的代码类似于： http://jsfiddle.net/jYasG/4/

HTML

<a id="open" href="#">test1</a>
<div id="boxbg"><a id="close" href="#">tatastat</a></div>    
<div id="bgfade"></div>    
<br>
<br>
<br>

<a id="open" href="#">test2</a>
<div id="boxbg"><a id="close" href="#">test2<br><br>test2<br><br></a></div>    
<div id="bgfade"></div>    

JavaScript

$(document).ready(function() {
    $("a#open").click(function() {
        var width1 = $(this).next('div').width();
        var width2 = width1 / 2 * -1;
        $("#boxbg").css({
            "margin-left": width2
        });

        var height1 = $(this).next('div').height();
        var height2 = height1 / 2 * -1;
        $("#boxbg").css({
            "margin-top": height2
        });


        $(this).next('div').fadeIn(300);
        $("#bgfade").fadeIn(300);
        return false;
    })

    $("a#close").click(function() {
        $(this).next().fadeIn(300);
        $("#bgfade, #boxbg").fadeOut(300);
        return false;
    })
})

When用户点击test1，div框垂直和水平完美居中；我试图做到这一点，以便 test2 在单击时具有相同的效果。我在这里做错了什么？

Answer 1

http://jsfiddle.net/calebgray/a6Ame/