jQuery 공작소 : .fadeIn()

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

fadeIn 메소드는 지정한 요소를 서서히 보여주는 효과를 줍니다.
해당 요소가 보이지 않는 상태여야 적용이 됩니다.
CSS - display : none 상태여야 합니다.

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

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

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

$( 셀렉터 ).fadeIn()  -  지정한 요소를 서서히 보여줍니다.
$( '.css_test  img' ).fadeIn()  -  클래스명이 css_test 요소인 것의 이미지서서히 보여줍니다.

예제 2
효과 시간 지정하기
보기
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 10px;
    }
    .css_test img {
        display : none;
        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/2129E34854D7351404" />
</div>

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

$( 셀렉터 ).fadeIn( 시간 )  -  지정한 시간 동안 서서히 보여줍니다. (1000분의 1초로 지정)

$( '.css_test  img' ).fadeIn( 500 )  -  클래스명이 css_test 요소인 것의 이미지0.5초 동안 서서히 보여줍니다.
$( '.css_test  img' ).fadeIn( 1000 )  -  클래스명이 css_test 요소인 것의 이미지1초 동안 서서히 보여줍니다.

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

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

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

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

$( '.css_test  img' ).hide().fadeIn( 1000, function(){
       alert( '따단~!' );
}
);

- 종료 후 함수안의 내용이 실행됩니다.

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