Question

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

这是迄今为止我所取得的成就的JS小提琴： 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);
    });

});

JQuery从中心收缩div

1 个答案: