如何在 jQuery 中使用其中心作为参考点来缩小 div？

我有以下 div ：

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

我想使用 jQueryanimate()将 div 缩小到其大小的一半，但保持 div 的动画和位置居中。

我想：

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

但它使用其左上角作为参考来缩小 div。如何让它以中心为参考点？

谢谢你的帮助！

由于您的 div 是通过使用绝对定位的top and margin-left，您还需要为它们设置动画：

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

对于编程方法来说，对 y 轴使用负边距可能会更容易。