[Effect] JQ - Hide/Show - hide() / show() / toggle() 메서드 ★ - 숨기기/보이기/토글 (= 하이드메서드 / 쇼우메서드 / 토글메서드)

목차

1. hide()/slow() 구문 ★ - 숨기기/보이기
2. hide() 예제 - 요소 자신 클릭해서 숨기기
3. hide() 예제 - 자식요소 클릭해 부모요소 숨기기
4. hide() 예제 - 숨기기 속도 옵션
5. show()/hide() 예제 - 탭 효과
6. toggle() 구문 ★ - 숨기기 /보이기 상호 전환
7. toggle() 예제 - (숨기기/보이기) 순서
8. 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>

결과보기