jQuery 공작소 : .fadeOut()

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

fadeIn 메소드는 지정한 요소를 서서히 사라지게 하는 효과를 줍니다.
해당 요소가 보이는 상태여야 적용이 됩니다.

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

<button type="button" onclick="$('.css_test img').fadeOut()">눌러보세용</button>
<button type="button" onclick="$('.css_test img').show()">다시하기</button>

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

$( 셀렉터 ).fadeOut()  -  지정한 요소를 서서히 사라지게 합니다.
$( '.css_test  img' ).fadeOut()  -  클래스명이 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="j_test(100)">0.1초</button>
<button type="button" onclick="j_test(500)">0.5초</button>
<button type="button" onclick="j_test(1000)">1초</button>
<button type="button" onclick="j_test(2000)">2초</button>

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

<script type="text/javascript">
    function j_test(n){
        $('.css_test img').show().fadeOut(n);
    }
</script>
관련 CSS
jQuery

$( 셀렉터 ).fadeOut( 시간 )  -  지정한 시간 동안 서서히 사라집니다. (1000분의 1초로 지정)

$( '.css_test  img' ).fadeOut( 500 )  -  클래스명이 css_test 요소인 것의 이미지0.5초 동안 서서히 사라집니다.
$( '.css_test  img' ).fadeOut( 1000 )  -  클래스명이 css_test 요소인 것의 이미지1초 동안 서서히 사라집니다.

예제 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(1000)">눌러보세용</button>

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

<script type="text/javascript">
    function j_test(n){
        $( '.css_test img' ).show().fadeOut( n, function(){
            alert('뿅~!');
        });
    }
</script>
관련 CSS
jQuery

$( '.css_test  img' ).hide().fadeOut( 1000, function(){
       alert( '뿅~!' );
}
);

- 위처럼 하면 종료 후 함수안의 내용이 실행됩니다.

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