일단 fadeIn()과 fadeOut()의 메뉴얼을 보고 싶다면 아래를 참조하길 바란다.
fadeIn : http://api.jquery.com/fadeIn/
fadeOut : http://api.jquery.com/fadeOut/
그럼 이 두가지 기능을 알았으니 간단한 응용을 해보자면.. 아래와 같다.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
at = 1;
function auto_slide(){
if( at==1 ){
$('#ts1').fadeOut(3000); //3초동안
at=0;
}else{
$('#ts1').fadeIn(3000);
at=1;
}
setTimeout('auto_slide()',3000); //3초마다
}
$(function(){
auto_slide();
});
</script>
</head>
<body>
<div style="position:absolute;top:0px;background-color:blue;width:400px; height:400px;"></div>
<div id="ts1" style="position:absolute;top:0px;background-color:red;width:400px; height:400px;"></div>
</body>
</html>
그림으로 하고 싶었지만, 마땅한 링크도 없고.. 링크란것은.. 오랜기간 후엔.. 사라지곤 해서.. 그냥 배경 색깔로 파랑과 빨강을 정해서 효과를 줬다.
setTimeout()을 이용해서 간단하게 재귀로 짜 본것이니, 직접 돌려보고 응용해보길 바란다.
참고로 fadeTo()와 fadeToggle() 함수도 있으니 알아두길 바란다.
fadeTo : http://api.jquery.com/fadeTo/
fadeToggle : http://api.jquery.com/fadeToggle/
특히 fadeToggle()을 이용하면 위의 함수를 더 간단히 표현할수 있다.
위의 <script></script> 부분을 아래의 소스로 대체 해보면 된다.
<script type="text/javascript">
function auto_slide2(){
$('#ts1').fadeToggle(3000, "linear");
setTimeout('auto_slide2()',3000);
}
$(function(){
auto_slide2();
});
</script>
easing - 효과의 진행 속도