• 회원가입
  • 로그인

[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>

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012