[jQuery 8장]숨겨진 태그 화면에 보여주기 효과

오랫만에 jquery 글을 올리게 되었다..

ExtJS에 요즘 빠져서 한동안 글을 못올리고 있었는데 메뉴정리하고.... 쿨럭!

오늘은 숨겨져 있는 태그를 보여주거나 현재 화면에 보여지는 태그들을 숨기기와 같은 DISPLAY작업을 해보자 한다.

CSS태그 중에서 

display : block (보여주기)

display : none(숨기기)

와 같은 기능을 하는 놈들이다.

사용함수는

$("").show() / $("").hide()

$("").slideDown() / $("").slideUp()

$("").fadeIn() / $("").fadeOut()

이렇게 세가지를 다뤄보도록 하겠다.

show/hide는 css 옵션중 display의 block/none이랑 같은 기능이고

slideDown/slideUp/fadeIn/fadeOut은 조금 애니메이션 효과가 들어가 있다.

예제로 숨겨져 있는 화면을 select box로 값을 지정 후 값의 구분에 따른 show/slideDown/fadeIn을 주어서 화면에 보여

줘보겠다.

샘플소스 전에 jquery 파일 include 해줘야 하는데 파일을 별도로 다운받지 않으신 분은 외부링크를 include(CDN)해주자(head 태그 내에)

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>

이어서 스크립트 소스부분(head 태그 내에)

$(function(){
		$("#showbtn").click(function(){
			if($("#displayselect").val() == "1") {
				$("#displaydiv").show();
			} else if($("#displayselect").val() == "2") {
				$("#displaydiv").slideDown();
			} else if($("#displayselect").val() == "3") {
				$("#displaydiv").fadeIn();
			}
		});
		$("#hidebtn").click(function(){
			if($("#displayselect").val() == "1") {
				$("#displaydiv").hide();
			} else if($("#displayselect").val() == "2") {
				$("#displaydiv").slideUp();
			} else if($("#displayselect").val() == "3") {
				$("#displaydiv").fadeOut();
			}
		})
})

그리고 샘플링을 위한 html 태그소스(body 태그 내에)

<select id="displayselect">
	<option value="1">show/hide</option>
	<option value="2">slide</option>
	<option value="3">fade</option>
</select>
<input type="button" id="showbtn" value="보여주기">
<input type="button" id="hidebtn" value="숨기기">
<div style="display: none;" id="displaydiv">
	<span>초기 숨겨져 있는 화면1</span>
	<span>초기 숨겨져 있는 화면2</span>
	<span>초기 숨겨져 있는 화면3</span>
	<span>초기 숨겨져 있는 화면4</span>
</div>

요약하자면 

보여주기 관련 함수는 show()/slideDown()/fadeIn()

숨기기 관련함수는 hide()/slideUp()/fadeOut()

을 사용하면 될것이다.

* 대소문자 구분에 유의하고 $(보여주기/숨기기태그).함수() 라는것을 기억하자!!

실행하면 다음화면과 같은 효과를 눈으로 확인하실수 있을겁니다.

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!