2013-07-15 1 views
0

나는 의도 한대로 작동하는이 코드를 가지고 있습니다. 첫 번째 애니메이션의 지속 시간은 0입니다.jQuery에서 % position을 사용하여 .css와 .animate 사이의 기묘한 차이

$(".myClass").animate({'top': '-=100%'}, 0).animate({top: '+=100%'}, 500); 

는 기본적으로, 자바 스크립트가 비활성화 된 경우 올바르게 배치 MyClass 클래스와 요소를 배치 할. javascript가 활성화 된 경우 먼저 컨테이너 외부에서 요소를 시작하여 원래 위치로 가져옵니다. 이 코드를 사용해 보았습니다.

$(".myClass").css({'top': '-=100%'}).animate({top: '+=100%'}, 500); 

나는이 두 가지가 같은 행동을 할 것이라고 기대했지만, .CSS 방법은 다른 방법으로 행동한다. 마치 백분율을 사용할 때 - = 100 %, .css는 요소 높이의 -100 %를 의미하지만 .animate는 요소의 컨테이너 높이의 -100 %를 의미합니다.

이런 식으로 작동해야합니까 아니면 내가 잘못한 것입니다. 요청시 더 많은 코드를 사용할 수 있습니다.

답변

3

AFAIK 방식으로 작동합니다. CSS 속성은 + = 및 - = 연산자를 사용하지 않습니다 (애니메이션과 같이 하나에 접근하거나 계산하는 것이 아니라 하드 값을 설정하기 때문입니다).

+1

맞습니다. jQuery 팀은 현재 값 (따라서 + = 및 - = 연산자)을 기준으로 애니메이션을 적용하는 것이 좋을 것이라고 생각했습니다. css 함수는 유효한 CSS가 아니기 때문에이 기능을 지원하지 않습니다. –