jQuery 공작소 : .toggle()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

toggle 메서드는 보였다 안보였다를 반복합니다.
show 메서드와 hide 메서드의 반복이라고 보시면 됩니다.

예제 1
기본 예제
보기
jQuery 공작소 toggle
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 20px;
    }
</style>

<button type="button" onclick="$('.css_test').toggle()">여러번 눌러보세용</button>

<div class="css_test">
    jQuery 공작소 toggle
</div>
관련 CSS
borderborder-radiusbox-shadowpadding
jQuery

- 보였다 안보였다를 반복합니다.
- 보이는 상태라면 안보이게, 안보이는 상태라면 보이게 만듭니다.

$( 셀렉터 ).toggle()  -  해당 셀렉터에 효과적용

예제 2
시간지정하여 애니메이션 효과넣기
보기
jQuery 공작소 toggle
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 20px;
    }
</style>

<button type="button" onclick="$('.css_test').stop().toggle(1000)">눌러보세용</button>

<div class="css_test">
    jQuery 공작소 toggle
</div>
관련 CSS
borderborder-radiusbox-shadowpadding
jQuery

- 시간을 지정하면 애니메이션 효과가 적용됩니다.
- 1/1000 초 단위로 입력합니다.

$( 셀렉터 ).toggle( 1000 )  -  해당 셀렉터에 1초 단위로 효과적용
$( 셀렉터 ).toggle( 100 )  -  해당 셀렉터에 0.1초 단위로 효과적용

예제 3
종료후 함수(스크립트)실행
보기
jQuery 공작소 toggle
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 20px;
    }
</style>

<button type="button" onclick="j_test()">눌러보세용</button>

<div class="css_test">
    jQuery 공작소 toggle
</div>

<script type="text/javascript">
    function j_test(){
        $('.css_test').toggle(1000, function(){
            alert('뿅');
        });
    }
</script>
관련 CSS
borderborder-radiusbox-shadowpadding
jQuery

- 효과 종료시 스크립트 실행을 할 수 있습니다.

$( 셀렉터 ).toggle( 1000, function(){ 코딩 } )  -  효과가 종료된후 스크립트 실행
$( 셀렉터 ).toggle( 100, gogogo )  -  종료후 gogogo 라는 이름의 함수 실행
$( 셀렉터 ).toggle( 1000, function(){ gogogo('움직엿!') } )  -  함수실행시 매개변수 전달은 이렇게

-함수만 실행하고 애니매이션 효과는 필요없을때
$( 셀렉터 ).toggle( 0, gogogo )  -  시간에 0 을 입력하면 됩니다.

예제 4
easing(이징) 효과 사용하기
보기
jQuery 공작소 toggle
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 20px;
    }
</style>

<button type="button" onclick="$('.css_test').toggle(1000, 'easeInOutBack')">눌러보세용</button>

<div class="css_test">
    jQuery 공작소 toggle
</div>
관련 CSS
borderborder-radiusbox-shadowpadding
jQuery

- easing 효과도 당연히 사용할 수 있습니다.

$( 셀렉터 ).toggle( 시간, 이징효과명 )
$( '.css_test' ).toggle( 1000, 'easeInOutBack' )

참고 예제 : easing(이징) 효과 모음

예제 5
이징효과도 쓰고 종료시 스크립트 실행도 하고 (풀옵션 가동)
보기
jQuery 공작소 toggle
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 20px;
    }
</style>

<button type="button" onclick="j_test()">눌러보세용</button>

<div class="css_test">
    jQuery 공작소 toggle
</div>

<script type="text/javascript">
    function j_test(){
        $('.css_test').toggle(1000, 'easeInOutBack', function(){
            alert('뿅');
        });
    }
</script>
관련 CSS
borderborder-radiusbox-shadowpadding
jQuery

- 이 메서드의 풀 옵션입니다.

$( 셀렉터 ).toggle( 시간, 이징효과명, 콜백함수(스크립트) )  -  풀옵
$( '.css_test' ).toggle( 1000, 'easeInOutBack', function(){
    alert('뿅');
} )

참고 예제 : easing(이징) 효과 모음

예제 6
예제 ! 버튼을 눌러보세요.
보기
소스
<style type="text/css">
    .css_test {
        border-collapse : collapse;
        border : 5px solid gray;
        padding : 5px;
        text-align : center;
    }
    .css_test td {
        border : 1px solid black;
        width : 160px;
        height : 150px;
    }
    .css_test img {
        max-width : 140px;
        max-height : 140px;
    }
    .css_test img.hide {
        display : none;
    }
</style>

<button type="button" onclick="$('.css_test img').stop().toggle(100)">빠르게 !!</button>
<button type="button" onclick="$('.css_test img').stop().toggle(500)">중간 !!</button>
<button type="button" onclick="$('.css_test img').stop().toggle(1000)">느리게 !!</button>
<button type="button" onclick="$('.css_test img').stop().toggle()">기본 !!</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/27239438550B92392A" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/236C4F3354D74FB232" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/216CB14B550B9B3812" /></td>
    </tr>
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2469B33354D74FB23B" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/224D643854D74C4F15" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/232B204B550B9B3932" class="hide" /></td>
    </tr>
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/26138D4854D7351522" /></td>
    </tr>
</table>
관련 CSS
borderborder-collapsedisplayheightmax-heightmax-widthpaddingtext-alignwidth
+ 관련 jQuery +
jQuery 홈페이지 .toggle() API 문서 : http://api.jquery.com/toggle/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소