[JavaScript] jQuery Effects (1) - Hide/Show

Javasciript의 복잡한 코드를 단순하게 만들어주는 jQuery의 Effects에 대해서 알아보자.

jQuery Effect는 HTML element들의 animation을 제어할 수 있으므로, 이 기능을 사용하면 우리가 좀더 동적인 웹페이지를 구성할 수 있을것이다.

앞으로 살펴볼 jQuery Effect들 중에서 가장 처음으로 다룰 주제는 Hide/Show 기능이다.

이 기능은 단순히 element를 웹페이지에서 숨기거나 다시 보여지게 하는 기능이다.

hide/show effect를 구현하는 함수 syntax는 다음과 같다.

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

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

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

duration은 효과가 나타나기 까지의 시간, callback은 effect 함수 실행 후 실행되는 콜백함수이다.

기본상태에서 trigger 아래에는 아무것도 없지만, trigger를 클릭하게 되면 아래로 panel이 하나 생긴다.

마찬가지로 panel이 보여지고있는 상태에서 다시 trigger를 클릭하면 panel이 사라진다.

현재 이 코드는 변수 stat에 panel이 보여지고있는지의 상태를 저장하고, trigger 클릭 시 stat의 값에 따라 panel에 대해 show(), 또는 hide()를 실행한다.

하지만 이 번거로운 작업이 필요없이, toggle() 함수를 사용하면 두 기능 모두 구현할 수 있다.

위의 예시는 똑같은 화면이지만, trigger click시 단순히 panel에 대해 toggle() 함수를 호출함으로써 동일한 기능을 구현하는 것을 알 수 있다.

위의 예제를 파일로 형성해 크롬 개발자 콘솔로 열어보면, panel의 style이 display:none으로 되어있는것을 알 수 있다.

이는 우리가 hide() 메소드를 호출하면 해당 element의 display값을  none으로 설정하는 것을 알 수 있다.