0

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

这是我到目前为止所取得的成就的 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;
}

查询：

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

});
4

1 回答 1

2

在动画打开之前将左侧/顶部设置为正确的“中心”位置，即

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

});​
于 2012-07-05T15:53:15.357 回答