jQuery 공작소 : .toggleClass()

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

toggleClass 는 실행시 마다 지정된 클래스를 적용, 해제 합니다
적용된 상태에서 실행하면 해제. 해제된 상태에서 실행하면 적용.

예제 1
이미지에 toggleClass 적용해 보기
보기
아래 버튼을 눌러보세요. ^^
누를때 마다 적용, 해제를 반복합니다.

소스
<style type="text/css">
    .css_test {
        margin-top : 20px;
    }
    .css_test .border_radius {
        border-radius : 20px;
    }
    .css_test .box_shadow {
        box-shadow : 0 0 10px gray;
    }
    .css_test .border {
        border : 5px solid gray;
    }
    .css_test .padding {
        padding : 7px;
    }
</style>

아래 버튼을 눌러보세요. ^^<br>
누를때 마다 적용, 해제를 반복합니다.<br><br>
<button type="button" onclick="$('.css_test img').toggleClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').toggleClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').toggleClass('border')">border</button>
<button type="button" onclick="$('.css_test img').toggleClass('padding')">padding</button>

<div class="css_test">
    <img class="border_radius box_shadow border padding" src="https://t1.daumcdn.net/cfile/tistory/2523EC4F54D7351637" />
</div>
관련 CSS
jQuery

toggleClass( '클래스명' )

예제 2
동시에 적용해 보기
보기
아래 버튼을 눌러서 클래스를 적용해 보세요. ^^


소스
<style type="text/css">
    .css_test {
        margin-top : 20px;
    }
    .css_test img {
        margin-top : 5px;
        width : 200px;
    }
    .css_test .border_radius {
        border-radius : 30px;
    }
    .css_test .box_shadow {
        box-shadow : 0 0 3px gray;
    }
    .css_test .border {
        border : 3px solid gray;
    }
    .css_test .padding {
        padding : 5px;
    }
</style>

아래 버튼을 눌러서 클래스를 적용해 보세요. ^^<br><br>
<button type="button" onclick="$('.css_test img').toggleClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').toggleClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').toggleClass('border')">border</button>
<button type="button" onclick="$('.css_test img').toggleClass('padding')">padding</button>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/216F4139550B923E33" />
    <img src="https://t1.daumcdn.net/cfile/tistory/267D3750550B9B3D0D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/213D5338550B92391D" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/2552A23854D74C4E0B" />
    <img src="https://t1.daumcdn.net/cfile/tistory/211F9841555AC4FE24" />
    <img src="https://t1.daumcdn.net/cfile/tistory/217BF13954D74FB720" />
</div>
관련 CSS
예제 3
애니메이션 효과 사용하기 - 클래스만 바꿨을 뿐인데 !!
보기
아래 버튼을 눌러보세요. ^^
애니메이션 효과도 적용됩니다. box-shadow 는 제외.

소스
<style type="text/css">
    .css_test {
        margin-top : 20px;
    }
    .css_test .border_radius {
        border-radius : 50px;
    }
    .css_test .box_shadow {
        box-shadow : 0 0 10px gray;
    }
    .css_test .border {
        border : 5px solid gray;
    }
    .css_test .padding {
        padding : 7px;
    }
</style>

아래 버튼을 눌러보세요. ^^<br>
애니메이션 효과도 적용됩니다. box-shadow 는 제외.<br><br>
<button type="button" onclick="$('.css_test img').toggleClass('border_radius', 500)">border-radius</button>
<button type="button" onclick="$('.css_test img').toggleClass('box_shadow', 500)">box-shadow</button>
<button type="button" onclick="$('.css_test img').toggleClass('border', 500)">border</button>
<button type="button" onclick="$('.css_test img').toggleClass('padding', 500)">padding</button>

<div class="css_test">
    <img class="border_radius box_shadow border padding" src="https://t1.daumcdn.net/cfile/tistory/234BC24D55AC84AA1C" />
</div>
관련 CSS
jQuery

toggleClass( 클래스명, 시간 )  -  시간은 천분의 1초 단위로 입력합니다. 500 이면 0.5초

- 제이쿼리 UI를 추가로 사용해야 애니메이션 효과가 되는군요.
- 참고 글 : easing(이징) 효과 모음

예제 4
애니메이션에 easing(이징) 효과 사용하기
보기
아래 버튼을 눌러보세요. ^^
이징(easing)효과도 적용되는군요. 버튼을 순서대로 눌러보세요~!

소스
<style type="text/css">
    .css_test {
        margin-top : 20px;
    }
    .css_test .border_radius {
        border-radius : 100px;
    }
    .css_test .border {
        border : 10px solid gray;
    }
    .css_test .padding {
        padding : 20px;
    }
</style>

아래 버튼을 눌러보세요. ^^<br>
이징(easing)효과도 적용되는군요. 버튼을 순서대로 눌러보세요~!<br><br>
<button type="button" onclick="$('.css_test img').toggleClass('border', 500, 'easeOutElastic')">1. border</button>
<button type="button" onclick="$('.css_test img').toggleClass('border_radius', 500, 'easeOutElastic')">2. border-radius</button>
<button type="button" onclick="$('.css_test img').toggleClass('padding', 500, 'easeOutElastic')">3. padding</button>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2211F438550B923C35" />
</div>
관련 CSS
jQuery

toggleClass( 클래스명, 시간, '이징효과 이름' )

- 참고 글 : easing(이징) 효과 모음

예제 5
jQuery
예제는 계속 추가됩니다 !!
+ 관련 jQuery +
jQuery 홈페이지 .toggleClass() API 문서 : https://api.jquery.com/toggleClass/