[웹디자인기능사] 슬라이드 메뉴-공개 와이어프레임5-1 (텍스트 페이드 인, 아웃)

[큐넷 자료실 웹디자인기능사 공개 와이어프레임 참고]

 

<공지사항, 갤러리 세부 구조>

 

+) 이미지 3초마다 자동 슬라이드 (순환)

+) 이미지와 함께 바뀌는 Text 

+) Text는 fadeIn, fadeOut 효과

 

http://doqtqu.tistory.com/31?category=795688 와 Text 효과 부분만 차이가 있습니다.

위 게시글의 script.js에서 switch 부분을 아래 코드와 같이 수정해주면 fadeIn, fadeOut 효과를 줄 수 있는데 이때 주의해야 할 점이 있습니다.

switch ((idx + 1) % 3) {
    case 1:
    // 첫 번째 텍스트 제외하고 다 가리기
    $(".text3").fadeOut(function(){
        $(".text1").fadeIn();
        $(".text2").fadeOut();
    });
      break;
    case 2:
    // 두 번째 텍스트 제외하고 다 가리기
    $(".text1").fadeOut(function(){
        $(".text2").fadeIn();
        $(".text3").fadeOut();
    });
      break;
    default:
      // 세 번째 텍스트 제외하고 다 가리기
    $(".text2").fadeOut(function(){
        $(".text3").fadeIn();
        $(".text1").fadeOut();
    });
      break;
  }

 

단순히 case 문 안에 

$(".text1").fadeOut();
$(".text2").fadeIn();
$(".text3").fadeOut();

 와 같은 효과를 주면 text1이 사라지기 전에 text2가 나오는 순서 문제가 발생합니다. 그래서 필요한 것이 콜백함수입니다. 

$(".text3").fadeOut(function(){
	$(".text1").fadeIn();
	$(".text2").fadeOut();
});

 

위 코드에서 콜백함수는 fadeOut안에 있는 인자인 function으로 text3을 fadeOut 처리하는 함수가 끝난 이후에 실행됩니다. 따라서 순서가 명확하게 text3 fadeOut-> text1 fadeIn, text2 fadeOut 로 진행되어 앞에서 설명한 순서 문제를 해결할 수 있습니다.