JQuery从中心缩小div

Question

我创建了一些JQuery，它将展开悬停的“弹出窗口”，然后它将缩小鼠标。但是，这种效应似乎是从左上角发生的，我需要它从中心发生。我已经看到堆栈溢出的类似主题，并且解决方案似乎是在JQuery和CSS中获得正确的'top'和'left'值，但是，尽管我尽了最大的努力，但我无法做到这一点。

这里是我到目前为止取得的成就一起工作一个JS小提琴： http://jsfiddle.net/MaverickJohnosn/m7q3H/

这里是任何人都无法访问该JS小提琴的代码。
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); 
    }); 

});​ 

前