jQuery에서 display 설정하기와 태그에 애니메이션 효과 주기

홈페이지글 꾸미다 보면 특정 태그들을 숨겼다 보였다 해야 하는 상황이 온다.

기존에 javascript에서는

obj.style.display 항목을 이용해서 조절할 수 있었다.

값은 block, inline, none을 지정할 수 있고,(그 외 많이 있지만, 주로 이 세가지를 사용)

obj.style.display = "block"을 하면 보이고

obj.style.display = "none"을 하면 숨김이 된다. 

마찬가지로 inline 속성을 사용하면 인라인 박스로 만든다.

아무튼 위처럼 디스플레이 속성을 조절하여도 되지만 간단하게 jQuery함수를 사용해도 된다.

$("#id").show()함수와 .hide()함수이다.

.show()함수는 display:block과 같고

.hide()함수는 display:none과 같다고 보면 된다.

즉, hide()함수로 태그를 숨기면 자리를 차지하지 않고 사라지게 된다.

그런데, 이 함수들이 강력한 것이 애니메이션 효과를 줄 수 있다는 것이다.

.show()함수는 obj를 리턴하기 때문에.

obj.show().delay(3000).hide();

와 같이 사용할 수 있다. 이러면 나타났다, 3초후에 사라지는 효과를 만들 수 있는데,

delay(time)함수는 time값 만큼 시간이 지난 후 함수가 리턴되는 것으로 time값이 1은 1milisecond를 말한다.

이와 비슷한 효과로 fadeIn(), fadeOut()함수 외 여러 함수가 있다.

그렇다면 마찬가지로 obj에 .style.position값으로 absolute값을 지정하게 되면, 위치를 마음대로 이동해도 기존 태그에 영향을 주지 않고 이동이 되므로 애니메이션 효과를 충분히 줄 수 있다.