jquery - 居中 DIV 并在同一动画中放大它？

Question

我position: absolute在文档上有一个 DIV。我希望它（无论它在文档上的哪个位置）在增长到一定大小的同时到达中心（所有内容都在动画中）我尝试使用 jQuery 的动画：

$('#el').animate({
        width: 600,
        height: 600,
        top: "-20%",
        left: "-50%"
    },1200);

有很多变化，但我就是无法确定数学应该如何发生。

Answer 1

您需要根据当前窗口的宽度和高度计算顶部和左侧，根据需要减去目标DIV的和高度并将结果除以2以获得中心点。

例如，要计算当前窗口宽度 = 1200 像素且 DVI 目标宽度为 600 像素的左侧位置，您可以执行以下操作： (WindowWidth - DivTargetWidth) / 2 = leftPosition; (1200 - 600) / 2 = 300;

这同样适用于从相关高度值计算顶部位置。

以下应该有效：

var targetWidth = 600;
var targetHeight = 600;
var targetTopPosition = ($(window).height() - targetHeight) / 2;
var targetLeftPosition = ($(window).width() - targetWidth) / 2;

console.log(targetTopPosition);

$('#el').animate({
    width: targetWidth,
    height: targetHeight,
    top: targetTopPosition,
    left: targetLeftPosition
}, 1200);​

演示- 居中和放大 DIV

这里是上面demo的全屏版的链接。