jQuery 효과

http://docs.jquery.com/UI/Effects

보여주기와 감추기의 기본

• show()는 감춰진 HTML 요소를 보여지게 한다. HTML 요소가 이미 보여지고 있으면 아무 효과도 없다. 속도값을 전달하지 않으면, HTML 요소는 바로 보여지지만 속도값을 전달하면 HTML 요소는 좌측 상단부터 나타나 우측 하단까지 애니메이션 효과를 주며 나타난다.
• hide()는 show()의 반대. 이것도 속도값을 줄 수 있다.
• toggle()은 HTML 요소가 보여지는 상태를 서로 바꾼다. 이 함수는 HTML 요소를 보이게 하거나 숨기는 것을 (버튼과 같은) 하나의 컨트롤로 제어할 떄 가장 좋다.

fadeIn/fadeOut

• fadeIn()은 감춰진 HTML 요소에 페이드 인 효과를 적용해 서서히 나타나게 한다. 속도값을 전달하지 않으면, HTML 요소는 'normal' 설정(400ms)을 사용한다.
• fadeOut()은 보여지는 HTML 요소를 페이드 아웃 효과를 적용해 유령처럼 서서히 사라지게 한다. 기본 속도는 fadeIn()과 같다.
• fadeTo()는 다른 효과 함수들과 약간 다른데 이 함수는 이미지를 지정한 불투명도로 바꾼다. 다른 효과와는 달리 속도값을 전달해야 하며, 두 번째 인수로 0부터 1까지의 특정 값의 html 요소 불투명도를 전달해야 한다. 예를들어, 모든 문단을 50%의 불투명도로 바꾸고 싶다면 아래와 같이 작성한다.
  $('p').fadeTo('normal', .50);

slideDown/slideUp

• slideDown()은 숨겨진 HTML 요소를 미끄러지듯 열리며 나타낸다. HTML 요소의 좌측 상단부터 나타나고, HTML 요소의 나머지 영역이 나타남에 따라 그 HTML 요소 아래에 있던 것들이 밀려난다. HTML 요소가 이미 보이면 아무런 효과도 없다. 속도값을 전달하지 않으면, HTML 요소는 'normal' 설정(400ms)을 사용하여 미끄러지듯 열린다.
• slideUp()은 slideDown()과 비슷하지만 HTML 요소들을 위쪽으로 이동 시킨다.
• slideToggle()은 HTML 요소가 숨겨진 상태라면 slideDown()을 실행하고, HTML 요소가 보이는 상태라면 slideUp()을 실행한다. 이 함수를 사용하면 HTML 요소를 나타내고 숨기는 동작을 (버튼과 같은) 하나의 컨트롤로 제어할 수 있다.
  

애니메이션

jQuery는 픽셀(px), em, 퍼센트(%) 값을 사용하는 CSS 속성을 애니메이션할 수 있는 animate() 함수를 제공한다. 예를들면, 텍스트의 크기나 HTML 요소의 위치, 객체의 투명도 혹은 경계선의 두께 등을 애니메이션 할 수 있다.
(CSS left, right, top, bottom 속성을 사용해 HTML 요소의 위치를 애니메이션하려면, 반드시 HTML 요소의 CSS position 속성을 absolote나 relative로 설정하여야 한다. 앞의 두 종류의 값을 사용해야만 HTML 요소에 위치값을 지정할 수 있다.)