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

});​ 

前