6

私は次の div を持っています:

<div id = "shrink-test" style = "position:absolute;top:100px;left:50%;margin-left:-50px;height:100px;width:100px;background-color: red;" />

そして、jQuery を使用animate()して div をそのサイズの半分に縮小しますが、div のアニメーションと位置を中央に保ちます。

私はしようとしています：

$("#shrink-test").animate(
{
   height: 50,
   width: 50
});

ただし、左上隅を参照として使用してdivを縮小します。その中心を基準点として使用するにはどうすればよいですか?

助けてくれてありがとう！

4

4 に答える 4

5

div はtopandを使用して絶対的に配置さmargin-leftれるため、それらもアニメーション化する必要があります。

$("#shrink-test").animate({
   height: 50,
   top: 125, // 100 + 50 / 2
   width: 50,
   marginLeft: -25 // 50 / -2
});

プログラムによるアプローチでは、y 軸にも負のマージンを使用する方が簡単な場合があります。

于 2013-01-07T21:03:19.363 に答える
4

これは、このための単純なjQueryプラグインです。

$.fn.resize = function( w, h ) {
  w = ( undefined !== w ? w : 50 );
  h = ( undefined !== h ? h : 50 );

  var cw = this.width();
  var ch = this.height();

  if ( 'static' === this.css( 'position' ) ) {
    this.css( {
      'position'    : 'relative',
      'top'         : '0px',
      'left'        : '0px'
    } );
  }

  this.stop().width( cw ).height( ch ).animate( {
    'top'    : '+=' + ( (ch - h) / 2 ) + 'px',
    'left'   : '+=' + ( (cw - w) / 2 ) + 'px',
    'width'  : w + 'px',
    'height' : h + 'px'
  } );
};

$( function() {
  $( '#shrink-test' ).resize(50,50);
} );

ここでテストしてください：http：//jsfiddle.net/bukfixart/nPjMa/1/

于 2013-01-07T21:28:59.670 に答える
3

次のように上と左をアニメーション化できます。

  $("#shrink-test").animate(
  {
      height: 50,
      width: 50,
      top: '+=25px',
      left: '+=25px'
  });

このフィドルを参照してください

于 2013-01-07T21:06:49.470 に答える
2

top次のように、およびleftまたはmarginプロパティなどを使用して、ページ上の位置を同時にアニメーション化する必要があります。

$("#shrink-test").animate(
{
   height: 50,
   width: 50,
   top: '150px',
   left: '75%'
});

それぞれに適切な値を使用します。

于 2013-01-07T21:00:28.277 に答える