0

ホバー時にdiv'ポップアップ'を展開し、マウスアウト時に縮小するJQueryを作成しました。ただし、この効果は左上から発生しているようで、中央から発生する必要があります。Stack Overflowで同様のトピックを確認しましたが、解決策はJQueryとCSSで正しい「top」と「left」の値を取得することであるようですが、最善を尽くしてもこれを正しく取得できません。

これが私がこれまでに達成したことのJSフィドルです：http： //jsfiddle.net/MaverickJohnosn/m7q3H/

JSFiddleにアクセスできない人のためのコードは次のとおりです。
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);
  });

});
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 に答える