javascript - 如何在 jQuery 中使用其中心作为引用点来缩小 div？

Question

我有以下 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。我怎样才能让它以它的中心为引用点？

感谢您的帮助!

Answer 1

由于您的 div 是使用 top 和 margin-left 绝对定位的，因此您还需要为它们设置动画:

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

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