jquery - 将绝对 div 动画到固定 div

Question

在我的网站上，我有一个在父 div 中有绝对位置的 div。我想要的是当我单击 div 时，它必须放大并定位在浏览器的中间。

我尝试的是这样的：

$j("#mac").click(function(){
 $j('#mac').css({
        position: 'fixed'
    });

$j('#mac').animate({
    width: 923,
    height: 498,
    left: ($j(window).innerWidth() - 923)/2,
    top: ($j(window).innerHeight() - 498)/2
  }, 1000)});

它起作用了，但发生的事情是#mac 首先定位到我屏幕的左上角，然后动画到我的屏幕中心。这是有道理的，因为使用了固定位置。但是当我不使用那个位置时，div 不会位于中心位置。

所以我不想在屏幕的左上角定位，但 div 必须从他的原始位置动画到屏幕的中心。

有人知道怎么做吗？

提前致谢！

Answer 1

当您将 CSS 位置更改为固定时，同时找到 DIV 的当前顶部和左侧位置并设置它们。那应该在正确的位置开始动画。

var offset = $j('#mac').offset();

$j('#mac').css({
    position: 'fixed',
    top: offset.top,
    left: offset.left
});