[JavaScript] jQuery Effects(2) - Fade

두 번째로 알아볼 jQuery Effect는 Fade이다.

이전에 포스팅했던 hide/show effect는 함수호출 시 element를 한번에 없어지게 하거나 나타나게 했다면,

Fade는 투명도를 서서히 조절하며 element를 화면에 나타내거나 없앤다.

Fade Effect 관련 함수는 다음과 같다.

$(selector).fadeIn([duration][,callback]);

$(selector).fadeOut([duration][,callback]);

$(selector).fadeTo(duration,opactiy[,callback]);

$(selector).fadeToggle(duration[,callback]);

fadeIn, fadeOut은 element의 이름 그대로의 효과를 적용하고, fadeTo는 element의 투명도를 함수 인자인 opacity로 설정한다.

fadeToggle은 fadeIn/fadeOut에 대한 토글 함수이다. 이 함수들에서 duration은 효과가 적용되기까지의 시간이고,

각 함수들의 적용이 끝나고 callback 함수를 통해 이후의 추가작업을 실행할 수 있다.

위의 예제를 보면 fadeIn, fadeOut의 duration에 숫자대신 "slow", "fast"가 들어가있는데, slow는 600ms, fast는 200ms를 나타낸다.

만약 duration값을 주지 않으면  default값인 400ms동안 지속하고, 만약 임의의 숫자를 주고싶다면 ms단위로 주어야한다(1s = 1000ms)

또한 fadeTo 함수를 실행했을 때 callback 함수로 alert를 호출했다. fadeTo의 실행이 끝난 후 알림창이 뜨는것을 확인할 수 있다.

만약 fadeToggle을 사용한다면 #trigger의 클릭부분이 좀더 간결하게 표현될 수 있겠다.