Javascript & JQuery & CSS

이번 장에서는 hide(), show(), toggle()에 대한 기능을 알아보겠습니다. 이미 앞장부터 보셨다면 이미 hide() 기능을 알고 계실거라 생각됩니다.

- hide() : hide() 기능은 객체를 숨기는 기능을 합니다.
- show() : show() 기능은 객체를 보여주는 기능을 합니다.
- toggle() : hide(), show() 기능을 하나로 묶어놓은 함수입니다.
 

  
		$("#hide").click(function(){
			$("p").hide();
		});

		$("#show").click(function(){
			$("p").show();
		});

hide() 와 show() 에 좀더 기능을 추가하면 더 멋진 효과를 볼 수 있습니다.
 

		$("#hide").click(function(){
			$("p").hide(1000);
		});

		$("#show").click(function(){
			$("p").show(1000);
		});

조금 틀려진 점은 "()" 안에 숫자가 들어가 있는것을 확인 할 수 있습니다.

1000은 1초를 의미하며, 1초 동안 사라지고, 보여지는 현상이 나타납니다.


toggle() 함수도 마찬가지로 괄호() 안에 숫자(1000) 등을 넣어 애니메이션 효과를 줄수 있습니다.

그리고 함수 "slow" , "fast" 등을 넣어 또 다른 애니메이션 효과도 가능합니다.
 

		$(selector).toggle(1000);  
		$(selector).toggle("slow"); 
		$(selector).toggle("fast");