jQuery 공작소 : .fadeToggle()

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

fadeToggle 메소드는 서서히 보였다 안보였다 효과를 교차 반복합니다.

예제 1
기본 예제 - 이미지에 적용
보기
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 10px;
    }
    .css_test img {
        max-width : 500px;
    }
</style>

<button type="button" onclick="$('.css_test img').fadeToggle()">눌러보세용</button>

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

$( 셀렉터 ).fadeToggle()  -  요소를 서서히 보였다 안보였다를 교차 반복합니다.
$( '.css_test  img' ).fadeToggle()  -  클래스명이 css_test 요소인 것의 이미지효과반복

예제 2
효과 반복 시간 설정
보기
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 10px;
    }
    .css_test img {
        max-width : 500px;
    }
</style>

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

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

$( 셀렉터 ).fadeToggle( 시간 )  -  요소를 지정한 시간만큼 효과를 적용합니다.
- 시간은 1000분의1초 단위입니다. 1000 이라면 1초

$( '.css_test  img' ).fadeToggle( 500 )  -  클래스명이 css_test 요소인 것의 이미지를 0.5 초동안 효과 적용
$( '.css_test  img' ).fadeToggle( 1000 )  -  클래스명이 css_test 요소인 것의 이미지를 1 초동안 효과 적용

$( '.css_test  img' ).stop().fadeToggle( 1000 )
stop 메서드를 사용하면 버튼을 연타했을때 효과가 중첩되어 실행되는것을 방지합니다.

예제 3
효과 적용 후 함수 실행
보기
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 10px;
    }
    .css_test img {
        max-width : 500px;
    }
</style>

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

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2573FA3354D74FB128" />
</div>

<script type="text/javascript">
    function j_test(n){
        $('.css_test img').fadeToggle(500, function(){
            alert( '두둥~' );
        });
    }
</script>
관련 CSS
jQuery

function j_test(){
     $( '.css_test  img' ).fadeToggle( 500, function(){
         alert( '두둥~' );
     } );
}

+ 관련 jQuery +
jQuery 홈페이지 .fadeToggle() API 문서 : http://api.jquery.com/fadeToggle/