.fadeTo()

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

fadeTo 메소드는 요소를 지정한 투명도로 서서히 바꿔줍니다.

+_+
예제 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').fadeTo(500, 0.5)">눌러보세용</button>
<button type="button" onclick="$('.css_test img').fadeTo(500, 0.1)">눌러보세용</button>
<button type="button" onclick="$('.css_test img').fadeTo(500, 1)">눌러보세용</button>

<div class="css_test">
    <img src="http://cfile22.uf.tistory.com/image/231F2B38550B923C2D9DB7" />
</div>
관련 CSS
jQuery

$( 셀렉터 ).fadeTo( 시간, 투명도 )  -  요소를 지정한 시간만큼 지정한 투명도를 적용합니다.
- 시간은 1000분의1초 단위이고 투명도는 0~1 사이의 수 입니다. (소수단위 포함)

$( '.css_test  img' ).fadeTo( 500, 0.1 )  -  클래스명이 css_test 요소인 것의 이미지를 0.5 초동안 0.1 투명도 지정
$( '.css_test  img' ).fadeTo( 1000, 0.5 )  -  클래스명이 css_test 요소인 것의 이미지를 1 초동안 0.5 투명도 지정

투명도는 0은 투명, 1은 불투명 입니다. 0.5 라면 중간값의 반투명 입니다.

예제 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(0.5)">눌러보세용</button>
<button type="button" onclick="j_test(0.1)">눌러보세용</button>
<button type="button" onclick="j_test(1)">눌러보세용</button>

<div class="css_test">
    <img src="http://cfile9.uf.tistory.com/image/25150D38550B923D321E76" />
</div>

<script type="text/javascript">
    function j_test(n){
        $('.css_test img').fadeTo(500, n, function(){
            alert( '이미지의 투명도는 ' + $(this).css('opacity') + ' 입니다.' );
        });
    }
</script>
관련 CSS
jQuery

function j_test( n ){
     $( '.css_test  img' ).fadeTo( 500, n, function(){
         alert( '이미지의 투명도는 ' + $(this).css( 'opacity' ) + ' 입니다.' );
     } );
}

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