CSS3 애니메이션 예제의 jQuery 애니메이션 구현 Introduction_jquery

jQuery Animation은 요소의 CSS 스타일을 한 상태에서 다른 상태로 변경하여 작동합니다. CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 만들 수 있습니다. 숫자 값만 애니메이션화할 수 있습니다(예: "여백:30px"). 문자열 값은 애니메이션화할 수 없습니다(예: "배경색:빨간색"). 자세한 사용법은 jQuery Effect - animate() 메소드와 공식 튜토리얼을 참고하세요.

CSS3와 같은 많은 효과는 숫자가 아니므로 animate() 메서드를 통해 직접 구현할 방법이 없습니다. translate(),rotate(),scale(),skew(),matrix(),rotateX(),rotateY()및 기타 메소드와 같은 메소드의 특징 중 하나는 해당 값이 문자와 혼합된다는 것입니다. 그리고 숫자. 따라서 애니메이션 효과를 얻기 위해 animate() 메서드를 직접 사용하여 해당 값을 동적으로 수정할 수 없습니다.

JavaScript를 사용하여 CSS3 애니메이션을 직접 구현하는 경우 setInterval() 메서드를 통해서만 구현할 수 있으며 구현이 더 복잡합니다. 실제로 animate() 메소드는 setInterval() 메소드를 기반으로 작동하지만 애니메이션 속도를 편리하게 설정할 수 있고, 고정 속도인지 가변 속도인지도 설정할 수 있습니다. animate() 메서드의 두 번째 사용법에는 애니메이션의 각 단계에서 실행될 함수를 지정하는 step 매개 변수가 있습니다. 요소에 큰 영향을 주지 않는 CSS 값을 이용하여 animate() 메소드를 실행시킨 뒤, step 콜백 함수에서 수정하고 싶은 값을 수정하면 애니메이션이 간접적으로 구현될 수 있습니다. 변환 예를 참조하세요.

코드 복사 코드는 다음과 같습니다.

#box {
너비:100px
높이:100px
위치:절대값
왼쪽 :100px;
텍스트 들여쓰기: 90px;
배경색:빨간색
}

$('#box').animate({ textIndent: 0 }, {
단계: 기능(현재,fx) {
$(this).css('-webkit-transform','rotate(' now 'deg)')
},
기간:'느림 '
},'linear')

여기에는 텍스트가 없으므로 text-indent 속성이 애니메이션을 트리거하는 데 사용되므로 스타일 효과에 영향을 주지 않고 text-indent가 사용됩니다. 요소의 글꼴 크기 등을 사용할 수도 있습니다. 그런 다음 animate() 메서드에서 생성된 리듬을 사용하여 애니메이션을 구현합니다. 비유하자면 우리는 많은 효과를 얻을 수 있습니다. 구체적인 예는 여기

참조 문서
•
jQuery 효과 - animate() 메서드 •
.animate()를 참조하세요.