jquery - fadeIn() , fadeOut() 을 이용한 간단한 자동 그림 전환

일단 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>

fadeIn() , fadeOut() 을 이용한 간단한 자동 그림 전환

단축키

Articles