[jQuery] jquery hide() show() animate()

jQuery show() hide() 사용법에 대해서 알아보겠습니다.

show()와 hide() 반대로 동작한다고 보시면 될꺼 같습니다.

show()는 숨긴 DOM을 다시 나타나게 하고

hide()는 DOM을 숨기는 역할을 합니다.

hide() 했을 때는 DOM의 영역까지 숨기는 

css의 display:none의 속성이 적용되니 참고하시기바랍니다.

소스와 예제를 통해서 알아보겠습니다.

- html 

<p id="result">Hide and show</p>
<button id="visible">Animate</button>

- javascript 

$(function () {
	$('#visible').off('click').on('click', function() {
  	if ($('#result').attr('hide') == "true") {
    	$('#result').show(function() {
    		$(this).attr('hide', false);
   	 	});
    } else {
    	$('#result').hide(function() {
    		$(this).attr('hide', true);
   	 	});
    }
  });
});

예제보기

일반적으로 DOM을 show(), hide() 할 때는 하나의 버튼을 사용하기 때문에 

버튼 하나를 생성해서 애니메이션을 컨트롤하였습니다.

최초에 DOM이 보이는 상태에서 버튼을 클릭하면

hide() animation이 적용되고 DOM의 hide상태인지 show상태인지 구분하기 위해

“hide”란 속성에 true 값을 넣어줍니다.

반대로 DOM이 안보이는 상태에서는 

hide=“true”로 되어있기 때문에 

show()가 실행되어 다시 나타나게 됩니다.

- 관련 링크

- [jQuery] jquery select value, select 값 가져오기, select 속성 값

- [jQuery] - [jQuery] jquery get get()

- [jQuery] - [jQuery] jquery form submit()

- [jQuery] - [jQuery] jquery change change()

- [jQuery] - [jQuery] jQuery each 함수, each 반복, each 루프