절대 div를 고정 div로 애니메이트

Question

내 웹 사이트에는 div가 절대 div로 표시됩니다. 내가 원하는 것은 브라우저 중간에 확대하고 위치시켜야하는 div를 클릭 할 때입니다. 내가 뭘하려

은 이것이다 :

그것은 작동하지만 일어난 것은 내 화면의 중앙에 애니메이션을보다 #mac가 먼저 내 화면의 왼쪽 상단 모서리에 위치하고 있다는 점이다

$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)}); 

. 이것은 고정 된 사용법 때문에 의미가 있습니다. 하지만 그 위치를 사용하지 않으면 div가 중심에 놓이지 않습니다.

그래서 화면의 왼쪽 상단 구석에 위치를 지정하고 싶지는 않지만 div는 원래 위치에서 화면 가운데로 움직여야합니다.

누군가이 방법을 알고 있습니까?

미리 감사드립니다.

Answer 1

CSS 위치를 고정으로 변경하면 동시에 DIV의 현재 상단 및 왼쪽 위치를 찾아서 설정합니다. 올바른 위치에서 애니메이션을 시작해야합니다.

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

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