Comment rétrécir un div en utilisant son centre comme point de référence dans jQuery?

J'ai la div suivante:

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

Et je veux utiliser l' animate() de jQuery animate() pour réduire le div à la moitié de sa taille, mais garder l'animation et la position de mon div centrée.

J'essaie:

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

Mais il rétrécit le div en utilisant son coin supérieur gauche comme référence. Comment puis-je utiliser son centre comme point de référence?

Merci pour toute aide!

Comme votre div est positionné absolument en utilisant top et margin-left , vous devrez également animer ceux-ci:

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

Pour une approche programmatique, il pourrait être plus facile d'utiliser une marge négative pour l'axe des y, aussi.

Voici un simple plugin jQuery pour cela

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

Testez-le ici: http://jsfiddle.net/bukfixart/nPjMa/1/

Vous pouvez animer en haut et à gauche comme si:

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

Voir cette violon

Vous devrez animer la position sur la page en même temps en utilisant des propriétés top et left ou margin , de la manière suivante:

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

Utiliser les valeurs appropriées pour chacun.