복습: jQuery의 DOM 애니메이션

출처: 복습: jQuery의 DOM 애니메이션

jQuery는 수많은 애니메이션과 효과와 관련된 함수를 제공합니다. 해당 목록은 해당 문서에 나와있습니다.

가시성 변경하기

단순히 물체의 가시 여부를 바꿀 때는 hide()와 show()를 사용할 수 있습니다:
$("#pic").hide();
$("#pic").show(); (예제 보기)

또한 현재 상태에 따라서 보여줄 것인지 보여주지 않을 것인지 결정하는 toggle()을 사용할 수 있습니다: $("#pic").toggle(); (예제 보기)

위 모든 함수에 지속시간을 전달할 수 있으며, 그다음 jQuery가 가시성 변화를 실제로 나타냅니다. $("#pic").toggle(1000);

또 슬라이딩 효과는 slideDown()slideUp() , slideToggle()을 사용하거나 (예제 보기) 페이딩 효과는 fadeIn()fadeOut() , fadeToggle()을 사용할 수 있습니다 (예제 보기).

위 모든 함수에 콜백 함수를 두 번째 매개변수로 전달할 수 있고, 해당 애니메이션이 완료되었을 때 jQuery가 전달된 콜백 함수를 호출할 것입니다:

또 여러 효과를 연속적으로 나타낼 수 있고 각 효과 사이의 시간을 지연시키고 싶다면 delay()를 호출할 수 있습니다:

$("#pic").slideUp(300).delay().fadeIn();

사용자 정의 애니메이션

만약 특정 CSS 속성에 애니메이션 효과를 적용하고 싶다면, animate()를 사용할 수 있습니다:

오직 숫자로 이루어진 값을 갖는 CSS 속성에 대해서만 애니메이션 효과를 적용할 수 있다는 사실을 기억하세요. 그렇기 때문에 ‘color’와 같은 속성에 애니메이션을 적용할 수 없습니다. (예제 보기)

또 만약 언제 애니메이션이 진행되거나 완료되는지 알고 싶다면 여러 콜백 함수를 animate()로 한데 묶을 수 있습니다. 자세한 내용을 보고싶다면 해당 문서를 확인하세요.

책임감있는 애니메이션 사용

애니메이션은 항상 사용자 경험을 개선해야 하지 절대로 악화시켜서는 안 됩니다. 애니메이션은 사용자가 웹 앱에서 어떤 기능을 이용하고 이해하는 것을 돕거나 즐거움을 제공하는 용도로 써야 합니다. 하지만 불필요하게 앱을 느려지게 해서 사용자를 지치게 해서는 안 됩니다. 사용자에게 애니메이션에 대해서 피드백을 구하거나 디자이너와 협업해 애니메이션을 어떻게 어디에 넣어야 할지 결정해 보세요.

만약 사용자가 애니메이션이 제대로 동작하지 않는 기기를 사용하는 것을 안다면, $.fx.off 값을 true로 설정할 수 있습니다.

댓글 남기기