.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
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
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
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
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
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="http://cfile25.uf.tistory.com/image/22528D4C550B9B3A03BA1D" /></td>
        <td><img src="http://cfile2.uf.tistory.com/image/237CBF4C550B9B3C2BD55C" class="hide" /></td>
        <td><img src="http://cfile7.uf.tistory.com/image/236C4F3354D74FB2327A89" /></td>
    </tr>
    <tr>
        <td><img src="http://cfile8.uf.tistory.com/image/237A604354E7264B1411CE" class="hide" /></td>
        <td><img src="http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8" /></td>
        <td><img src="http://cfile10.uf.tistory.com/image/2227B74F54D73516319C98" class="hide" /></td>
    </tr>
    <tr>
        <td><img src="http://cfile8.uf.tistory.com/image/213D5338550B92391D284F" /></td>
        <td><img src="http://cfile30.uf.tistory.com/image/23356241555AC4FC15699F" class="hide" /></td>
        <td><img src="http://cfile6.uf.tistory.com/image/24604B4B550B9B37182BB7" /></td>
    </tr>
</table>
관련 CSS
+ 관련 jQuery +
jQuery 홈페이지 .toggle() API 문서 : http://api.jquery.com/toggle/