고정 위치에 대한 CSS의 상대적인 위치 - CSS 전환

Question

설명

나는 그것이 어디에서 자라고있는 것처럼 보이게하려고합니다. 이렇게하려면 상대 좌표를에서 으로 고정 고정 위치로 변경하면 첫 번째 전환이 요소의 현재 상단/왼쪽 대신에 top:0, left:0에서 시작됩니다. 현재 오프셋 요소를 사용하려면이 문제를 어떻게 해결할 수 있습니까?

JS 바이올린

http://jsfiddle.net/ZjWkD/

참고 : 첫 번째 클릭 후이 코드는 I가 원하는 방법을 정확하게 작동합니다. 첫 번째 클릭이 문제입니다.

Answer 1

안녕하세요 바이올린 주셔서 감사합니다,

그것은 당신이 먼저 여기에 CSS를 설정, 당신은 당신의 초기 설정에 추가로 물건을 조금 엉망으로 된 대상-사업부에 전환을했을 때처럼 보이는

클릭 기능 내부의 위치

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

제대로 사업부를 배치합니다 클릭 기능 화재 전 대상-DIV의 위치를 ​​설정하고, 그 위에 애니메이션없이 CSS를 적용 대상-DIV 정확한 지점에 있는지 확인 때 문서 로드 (해당 target-div에 애니메이션을 유지하는 경우 $ (document) .ready에 시작 CSS를 적용하더라도 페이지가로드되고 div가 시작되지 않고 애니메이션이 실행됩니다.

애니메이션을 위해 별도의 클래스를 사용하고 초기 위치 지정이 설정된 후에 만이를 적용했습니다 (아래의 테스트 클래스 .test 클래스 참조).

http://jsfiddle.net/Jag96/wdh4N/