JQuery 从中心收缩 div

Question

我创建了一些 JQuery，它会在悬停时展开一个 div“弹出窗口”，然后在鼠标移开时缩小它。然而，这种效果似乎是从左上角发生的，我需要它从中心发生。我在 Stack Overflow 上看到了类似的主题，解决方案似乎是在 JQuery 和 CSS 中获取正确的“top”和“left”值，但是，尽管我尽了最大的努力，但还是无法做到这一点。

这是我迄今为止使用的 JS Fiddle: http://jsfiddle.net/MaverickJohnosn/m7q3H/

这是为任何无法访问 JS Fiddle 的人准备的代码。
HTML

<div class="productborder">
    <p>Section Title</p>
<div class="popup"><a href="#"></a></div>
<div class="productimg"><a href="#"></a></div>
</div>

<div class="productborder">
    <p>Section Title</p>
<div class="popup"><a href="#"></a></div>
<div class="productimg"><a href="#"></a></div>
</div>

CSS:

.productimg{
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 0;
width: 135px;   
height: 147px;
outline: 1px solid green;
}

.popup{
margin-top: 25px;
margin-left: 120px;
outline: 1px red solid;
position: absolute;
float: left;
z-index: 1;
}

.productborder{
border: 2px dashed #ccc;
padding: 5px 10px;
width: 210px;
float:left;
margin: 5px 11px;
position: relative;
}

JQuery:

$(document).ready(function() {
  $('.productborder', this).hover(

    function() {
      $('.popup', this).stop(true, true);
      $('.popup', this).animate({
          width: '100px',
          height: '100px',
          top: '25px',
          left: '55px'
      }, 500);
    }, function() {
      $('.popup', this).animate({
          width: '0px',
          height: '0px',
          top: '0px',
          left: '0px'
      }, 500);
  });

});

Answer 1

在打开动画之前将左/上设置到正确的“中心”位置，即

$(document).ready(function() {
    $('.productborder', this).hover(

    function() {
        $('.popup', this).stop(true, true);
        $('.popup', this).css({
            left: '110px',
            top: '75px'
        });
        $('.popup', this).animate({
            width: '100px',
            height: '100px',
            top: '25px',
            left: '55px'
        }, 500);
    }, function() {
        $('.popup', this).animate({
            width: '0px',
            height: '0px',
            top: '110px',
            left: '75px'
        }, 500);
    });

});​