jQuery 공작소 : .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="https://t1.daumcdn.net/cfile/tistory/275A3644552F50A828" />
</div>
.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="https://t1.daumcdn.net/cfile/tistory/275A3644552F50A828" />
</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="https://t1.daumcdn.net/cfile/tistory/22366638555ABF491B" />
</div>
<script type="text/javascript">
function j_test(n){
$('.css_test img').fadeTo(500, n, function(){
alert( '이미지의 투명도는 ' + $(this).css('opacity') + ' 입니다.' );
});
}
</script>
.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="https://t1.daumcdn.net/cfile/tistory/22366638555ABF491B" />
</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/