목차
- hide()/slow() 구문 ★ - 숨기기/보이기
- hide() 예제 - 요소 자신 클릭해서 숨기기
- hide() 예제 - 자식요소 클릭해 부모요소 숨기기
- hide() 예제 - 숨기기 속도 옵션
- show()/hide() 예제 - 탭 효과
- toggle() 구문 ★ - 숨기기 /보이기 상호 전환
- toggle() 예제 - (숨기기/보이기) 순서
- toggle() 예제 - (보이기/숨기기) 순서
hide()/slow() 구문 ★ - 숨기기/보이기
숨기기
$(selector).hide(speed, easing, callback);
보이기
$(selector).show(speed, easing, callback);
[매개변수]
speed
선택. 동작 완료에 걸리는 시간. (기본값: 400)
※ 3가지 표현 가능. (주의: slow, fast 적을 때 따옴표 사용)
- "slow"
- "fast"
- 1/1000 초 (= 밀리초). (1초 = 1000)
easing
선택. 속도 변경 방법. (기본값: swing) ※ 가능값은 아래와 같음.
- swing : 시작/끝은 더 느리게. 중간에선 더 빠르게. (기본값)
- linear : 똑같은 속도 유지.
- ※ 그외도 많은데, 이건 구글링. ㅡㅡ;
callback
선택. 동작 완료 후, 실행시킬 함수. (= 콜백함수)
hide() 예제 - 요소 자신 클릭해서 숨기기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
<p>홈짱닷컴 (Homzzang.com)</p>
결과보기
hide() 예제 - 자식요소 클릭해 부모요소 숨기기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".intro .hide").click(function(){
$(this).parents(".intro").hide("slow");
});
});
</script>
<style>
div.intro {
width:400px;
color:#fd87c0;
background-color: #fef5f7;
padding: 7px;
border: 1px solid #fd87c0;
}
div.intro > button {float:right;}
</style>
<h3>홈짱닷컴 (Homzzang.com)</h3>
<div class="intro">
<button class="hide">숨기기</button>
<p>홈페이지 제작관리 강의</p>
</div>
결과보기
hide() 예제 - 숨기기 속도 옵션
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
<button>숨기기</button>
<p>홈짱닷컴 (Homzzang.com)</p>
<p>홈페이지 제작관리 강의</p>
show()/hide() 예제 - 탭 효과
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div id="hz1" style="display:">홈짱닷컴</div>
<div id="hz2" style="display:none">Homzzang.com</div>
<div id="hz3" style="display:none">코딩강의</div>
<div>
<button type="button" id="btn1">버튼1</button>
<button type="button" id="btn2">버튼2</button>
<button type="button" id="btn3">버튼3</button>
</div>
<script>
$(function() {
$('#btn1').on('click', function() {
$('#hz1').show();
$('#hz2').hide();
$('#hz3').hide();
});
$('#btn2').on('click', function() {
$('#hz2').show();
$('#hz1').hide();
$('#hz3').hide();
});
$('#btn3').on('click', function() {
$('#hz3').show();
$('#hz1').hide();
$('#hz2').hide();
});
});
</script>
결과보기
PS. 이 방법은 브라우저에 로드 후 보이기/숨기기 처리하니, AJAX 이용 권장.
toggle() 구문 ★ - 숨기기 /보이기 상호 전환
$(selector).toggle(speed, callback);
[매개변수]
speed
선택. 동작 완료에 걸리는 시간. (기본값: 400)
※ 3가지 표현 가능. (주의: slow, fast 적을 땐 따옴표 사용.)
- "slow"
- "fast"
- 1/1000 초 (= 밀리초). (1초 = 1000)
callback
선택. 동작 완료 후, 실행시킬 함수. (= 콜백함수)
toggle() 예제 - (숨기기/보이기) 순서
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
<button>숨기기/보이기</button>
<p>홈짱닷컴 (Homzzang.com)</p>
<p>홈페이지 제작관리 강의</p>
toggle() 예제 - (보이기/숨기기) 순서
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
$("button").click(function(){
$("p").toggle();
});
});
</script>
<button>클릭</button>
<p>홈짱닷컴 (Homzzang.com)</p>
<p>홈페이지 제작관리 강의</p>
결과보기
