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 不会定位在中心。

所以我不想在屏幕的左上角放置 te，但 div 必须从其原始位置到屏幕中心进行动画处理。

有人知道怎么做吗？

提前致谢!

Answer 1

当你把CSS位置改成fixed的时候，同时找到DIV当前的top和left位置，也设置一下。这应该会在正确的位置开始动画。

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

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