애니메이션 스케일 X/스케일 Y

Question

jQuery는 스케일 X/스케일 Y 변환 효과를 제공하지 않습니다 – 거기에 해결책이 (플러그인) 있습니까?

내가이 예를 생각하고 :

이미지 저작권 : (C) 2011 마이크로 소프트, http://msdn.microsoft.com/en-us/library/ms742560.aspx

Answer 1

jQuery UI가 제공합니다. http://docs.jquery.com/UI/Effects/Scale

Answer 2

jQuery를 너비/높이 전환 효과를 제공합니다. 그걸 쓸 수 없니?

타이머 (setInterval)를 사용하여 자신의 애니메이션을 만들 수도 있습니다. 눈금 크기를 여러 프레임으로 분할하고 프레임 단위로 크기를 조절합니다. 애니메이션을보다 재미있게 만들기 위해 일부 여유 함수를 사용할 수도 있습니다.

Answer 3

CSS 전환을 사용하여이를 달성하는 좋은 방법을 발견했습니다. 요소에 "Ease"전환을 추가 한 다음 애니메이션을 적용하려면 jQuery의 addClass를 사용하여 배율 인수가 포함 된 새 클래스를 추가합니다.

CSS의 :

.obj{ 
    width: 100px; 
    height: 100px; 
    background: grey; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.scale{ 
    -webkit-transform: scaleX(0.5); 
    -o-transform: scaleX(0.5); 
    -moz-transform: scaleX(0.5); 
    transform: scaleX(0.5); 
} 

JQuery와 :

$("#a_b").click(function(){ 
    $(".obj").addClass("scale"); 
});​ 

example