jQuery 이펙트(Effects) - 숨김, 나타내기 (Hide and Show, toggle)

웹사이트를 돌아다니다 보면 버튼이나 아이콘을 클릭하면 사라졌다가 나타나는 것을 볼수 있다.

이러한 것들이 javascript를 이용한 것이다.

jQuery에서는 이러한 효과를 간단하게 적용할 수 있다.

다음과 같은 것을 사용한다.

$().hide();				// 해당하는 html 요소를 숨긴다.
$().show();				// 해당하는 html 요소를 보여준다.
$().togggle();			// hide와 show를 번갈아 가면수 수행한다.

위 3가지의 구문은 다음과 같다.

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

어떻게 동작하는지 확인해보기 위해서 일단 head 부분에 다음과 같이 입력한다.

html을 보여주는 body 부분에는 다음과 같이 작성한다.

버튼을 누르면 사라졌다가 나타납니다.

'숨기기' 버튼을 누르면 div 부분이 사라집니다.

'보이기' 버튼을 누르면 div 부분이 나타납니다.

사라지는 속도와 타타나는 속도를 조절할 수 없을까?

구문에 보면 speed 라는 부분이 있습니다. 여기에 시간을 입력하는 겁니다.

다음과 같이 입력하면 됩니다. head 부분을 일부 수정합니다.

위처럼 적용하였으면 사라지는데 1초가 걸립니다.

나타나는데도 동일한 시간이 걸립니다.

그럼 이제 toggle은 어떻게 동작하는지 알기 위해서 head 부분에 다음의 내용을 넣습니다.

body 부분도 아래와 같이 입력합니다.

왔다리 갔다리 으흠?