jQuery 공작소 : .slideToggle()

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

slideToggle 메서드는 slideUp, slideDown 메서드를 번갈아 가면서 실행합니다.

예제 1

기본 예제

보기

소스

<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').slideToggle()">눌러보세용 (연타 !!!)</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2570B33354D74FB12F" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2408093354D74FB106" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2408093354D74FB106" /></td>
    </tr>
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2523EC4F54D7351637" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/213D684C550B9B3B0D" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/213BA03854D74C4F35" class="hide" /></td>
    </tr>
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/234BC24D55AC84AA1C" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2515ED4854D735161E" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2341424F54D735170D" /></td>
    </tr>
</table>

관련 CSS

borderborder-collapsedisplayheightmax-heightmax-widthpaddingtext-alignwidth

jQuery

- slideToggle 은 누를때마다 보였다 안보였다를 반복합니다.
- slideDown 과 slideUp 의 효과를 반복하는 것입니다.

$( '.css_test img' ).slideToggle() - css_test 클래스의 img 요소에 slideToggle 효과 적용

참고 메서드 : .slideDown() .slideUp()

예제 2

속도 조절 사용한 예제

보기

소스

<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().slideToggle(100)">빠르게 !!</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(500)">중간 !!</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(1000)">느리게 !!</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle()">기본 !!</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/21385A4C550B9B3D10" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/27581A3854D74C4E01" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2439673854D74C4D39" /></td>
    </tr>
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2570B33354D74FB12F" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/234BC24D55AC84AA1C" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/23285B4D55AC84AD33" class="hide" /></td>
    </tr>
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/21714438550B923B42" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/21028950550B9B3E0B" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2604833354D74FB40E" /></td>
    </tr>
</table>

관련 CSS

borderborder-collapsedisplayheightmax-heightmax-widthpaddingtext-alignwidth

jQuery

slideToggle( 속도 ) - 1000 분의 1초 단위로 입력합니다.
slideToggle( 1000 ) - 1초
slideToggle( 500 ) - 0.5초
slideToggle() - 기본값은 400 즉 0.4초 입니다.

예제 3

움직임 효과(easing) 사용하기

보기

소스

<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 : 240px;
        height : 200px;
    }
    .css_test img {
        max-width : 200px;
        max-height : 200px;
    }
    .css_test img.hide {
        display : none;
    }
</style>

<button type="button" onclick="$('.css_test img').stop().slideToggle(1000, 'easeInCirc')">easeInCirc</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(1000, 'easeInOutBack')">easeInOutBack</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(1000, 'easeInBounce')">easeInBounce</button>
<button type="button" onclick="$('.css_test img').stop().slideToggle(1000, 'easeInElastic')">easeInElastic</button>
<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/232E7438555ABF4020" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/27210A38555ABF4229" class="hide" /></td>
    </tr>
    <tr>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/223D2D4C550B9B3B0D" class="hide" /></td>
        <td><img src="https://t1.daumcdn.net/cfile/tistory/2509693354D74FB503" /></td>
    </tr>
</table>

관련 CSS

borderborder-collapsedisplayheightmax-heightmax-widthpaddingtext-alignwidth

jQuery

slideToggle( 시간, '효과이름' )
slideToggle( 1000, 'easeInCirc' ) - 1초 동안 easeInCirc 효과를 적용한 움직임 실행

참고 문서 : easing(이징) 효과 모음

+ 관련 jQuery +

jQuery 홈페이지 .slideToggle() API 문서 : http://api.jquery.com/slideToggle/

☞ 목록으로 가기