jQuery animate() 마스터하기:사용자 정의 CSS 애니메이션에 대한 빠른 가이드

jQuery animate()를 사용하는 이유는 무엇인가요?

jQuery animate()에는 다양한 사용 사례가 있습니다. . 간단히 말해서, 응용 프로그램의 프런트 엔드에 애니메이션이 필요할 때마다 이 방법을 사용할 수 있습니다. 이 방법은 역동적이고 복잡한 솔루션을 제공합니다. 

애니메이션은 프런트 엔드 개발의 표준 관행이 되었습니다. animate()을 사용해 충분히 연습한 후 , 프로젝트의 프런트 엔드에 애니메이션을 즉시 구현하게 될 것입니다. 몇 가지 구문을 배워 시작해 보겠습니다. 

jQuery animate() 구문

간략하게 논의한 바와 같이 animate() CSS 객체의 인수를 취합니다. 이는 선택한 CSS 속성의 새 값을 포함하는 개체입니다. 가장 좋은 방법은 animate()만 사용하는 것입니다. 스타일시트에서 참조되는 요소에 대해 

모든 jQuery 메서드와 마찬가지로 animate() 선택한 요소에 첨부되어야 합니다. 거기에서 animate()로 전화하세요. 원하는 최종 모양의 값과 함께 CSS 속성 개체를 전달합니다. 여기서 animate()를 언급하는 것이 중요합니다. CSS의 수치 속성에서만 작동합니다. 색상이나 글꼴 유형과 같은 속성은 animate()에서 읽을 수 없습니다. .

JQuery animate() 실행

버튼과

의 기본 HTML 렌더링부터 시작하여 위의 설명을 더 명확하게 하기 위해 코드로 분해해 보겠습니다.

HTML
<button id="click">Click Me</button>
<div id="block">Watch Me!</div>

두 요소 모두 id 속성을 갖습니다. 이것이 jQuery를 사용하여 선택하는 데 사용할 것입니다. 이제 animate()을 사용할 수 있도록

의 스타일을 지정하는 방법을 살펴보겠습니다. .

CSS
 div {
 background-color: lightblue;
 width: 100px;
 border: 1px solid blue;
 }

여기서는 배경색, 너비, 작은 테두리를 사용하여

스타일을 지정했습니다. jQuery를 사용하여

를 선택하면 animate()을 전달할 수 있습니다. CSS 속성의 객체. 이러한 속성은 우리가 보고자 하는 최종 변경 사항을 반영합니다. 

$('#click').click(function() {
 $('#block').animate({
 width: '70%',
 fontSize: '3em',
 borderWidth: '10px'
 })
})

jQuery를 분석하면 클릭의 id 속성으로 버튼을 선택한 것을 볼 수 있습니다. 그런 다음 jQuery click()을 호출합니다. 클릭 수신을 기다리는 이벤트 핸들러를 연결하는 메서드입니다. click() 1회 클릭 이벤트를 수신하면 콜백 함수가 실행됩니다. 

기억을 되살리기 위해 콜백 함수는 나중에 실행될 다른 함수에 전달되는 함수입니다. 이 경우에는 클릭 이벤트가 감지된 이후입니다. jQuery click()에 대해 자세히 알아보세요. 여기. 

콜백 함수 내부로 이동하여

를 선택합니다. 버튼과 마찬가지로 블록의 id 속성을 사용하여 선택합니다. 이제 animate()에 전화하겠습니다.

에 CSS 객체를 전달합니다. 

FontSize 및 borderWidth가 CSS에서 선언하는 방식과 어떻게 다른지 확인하세요. 이것이 jQuery가 일반적으로 하이픈으로 연결된 CSS 속성을 허용하는 방법입니다. 

CSS 개체의 값은 애니메이션이 완료된 후 렌더링하려는 값입니다. 이제 버튼을 클릭하면

애니메이션이 표시됩니다. 

효과가 있었어요! 새로운 CSS 값에 도달할 때까지

의 내용이 모두 함께 확장되는 것을 볼 수 있습니다. 

결론

jQuery animate() 초보자를 위한 입문서 , 우리는 animate()을 알게 되었습니다 CSS 객체에 애니메이션을 수행합니다. 해당 CSS 개체는 최종 표시 값과 함께 메서드에 전달됩니다. animate()에서는 숫자 CSS 값만 읽을 수 있다는 점을 반복합니다. . 배경색, 글꼴 유형 등의 속성은 읽혀지지 않습니다.

jQuery animate()로 다룰 내용이 더 많습니다. , 이 소개 내용이 이해가 되시면 여기를 클릭하세요. 공식 문서를 읽고 포함된 예제를 사용해 연습하는 것은 항상 좋은 습관입니다. jQuery animate() 처음에는 상당히 복잡해 보일 수 있지만 정기적으로 연습하면 생각보다 빨리 애니메이션을 마스터할 수 있습니다!