[jQuery] 제이쿼리 기초 및 사용방법 part.4 CSS vs Animate

일단 animate의 다양한 기능에 대해서 설명하겠다.

 

 

$("div").animate({right: "250px"});

 

이걸사용해서 원하는 태그를 이동시킬 수 있다.

혹시 여러개를 동시에 사용하고싶다면

$("div").animate({right: "250px", backgroundColor : "blue"});

 

이렇게 , 로 묶으면된다.

 

 

이렇게 animate에서 right말고도 opacity, width, height, backgroundColor 등등 다양한 기능을 사용할 수 있다.(양이 방대하니 필요할때 원하는 기능을 즉각적으로 찾아보길 바란다)

 

그러면 의문점이 들것이다.

과연 animate는 언제 사용할까?

 

왜냐하면 css를 변경하려면 animate말고도 .css();를 이용하여 변경할 수 도 있기 때문이다.

 

쪼금 딥하게 들어간다면 CSS 명령을 통해 CSS 속성을 직접 변경하는 것이 CSS 애니메이션이 브라우저에 의해 하드웨어 가속될 수 있기 때문에 성능이 더 좋은 경우가 많다.

이는 특히 모바일 장치에서 더 부드러운 애니메이션으로 이어질 수 있다.

그리고 프레젠테이션(스타일링 및 애니메이션)을 JavaScript(jQuery)와 분리하여 유지하는것이 좀더 좋은 웹 개발 사례에 따르므로 코드를 더욱 체계화하고 유지 관리하기 쉽게 만든다.

CSS는 스타일과 기본 애니메이션을 관리하는 데 적합하지만 JavaScript는 동적 동작, 사용자 상호 작용, 로직이나 실시간 데이터 업데이트가 포함될 수 있는 복잡한 애니메이션을 처리하는 데 필수적이다.

 

그럼 다시 

좀더 시각적인 차이는 무엇이 있을까?

 

 

예를들어 css를 사용하여 요소를 숨기는 코드는

$("div").css("display", "none");

 

이다

 

그리고 animate를 이용한 숨기는 코드는

$("div").fadeOut();

 

이다

 

결과는 똑같이 숨기는건 맞지만 자세히 뜯어본다면 조금씩 차이가 있다.

 

css는 선택된 <div> 요소의 display 속성을 즉시 "none"으로 설정한다.

즉, 이는 이 코드가 실행되자마자 요소가 보이지 않게 되고 레이아웃의 어떤 공간도 차지하지 않는다는 것을 의미한다는 말이다

 

다만 animate는

지정된 기간(기본값은 400밀리초) 동안 요소의 '불투명도'를 현재 값(일반적으로 1 또는 표시)에서 0으로 점진적으로 줄인 뒤

애니메이션이 완료된 후 'display' 속성이 'none'으로 설정되어 해당 요소가 더 이상 레이아웃에서 공간을 차지하지 않게 되는 것이다.

 

말그대로 animate는 애니메이션을 보여주고 사라지고 css는 그즉시 사라진다는점이다.

결국 이 둘의 선택은 각자의 만들고싶어하는 방향성과 분위기 목적을 파악하여 상황에 맞게 사용해야한다.

 

 

예를들어 중요한 자리에서 정확한 정보를 전달해야하는 차트같은거를 보여줄때는 css를

좀더 사용자에게 친숙하게 다가가야하는 상황에서 사진같은것을 보여줄 때는 animate 사용할 수 있을 거 같다.(심플,깔끔 vs 화려함,친숙)

 

이상 css vs animate의 차이를 알아보았다.

 

 

 

 

 

다른 jQuery팁들도 많이 올려놨으니 궁금하신분은

아래 링크를 타고 보면 됩니다.

 

[jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after

jQuery 기초 및 사용방법 part.3 이벤트 종류

jQuery 기초 및 사용방법 part.2 hide, show, toggle

jQuery 기초 및 사용방법 part.1 $, #, 태그?

 

 

학스의 개발일지

 

 

 

오류나 궁금하신점은
아래 댓글로 알려주시면 감사하겠습니다.