하코사 jQuery 스터디 Ch.7

1. HACOSA jQuery STUDY
#7. 효과

2. 소개
• Animate 메서드
‒ CSS 속성을 제어 할 수 있다
‒ scrollTop과 scrollLeft DOM 속성을 제어 할 수 있다.
‒ 종점 값을 위해 CSS 계측단위를 사용할 수 있다.
‒ 상태를 전환하기 위한 값으로 toggle을 사용 할 수 있다. (ex. Opacity:toggle)
‒ 애니메이션에 easing 메서드를 지정할 수 있다.
‒ 애니메이션의 모든 지점에서 콜백을 설정할 수 있다.
‒ 애니메이션을 큐에 넣거나 혹은 동시에 실행하도록 지정할 수 있다.
• 애니메이션 속성을 지정하는 경우에는 반드시 카멜 표기법을 사
용해야 한다. 그렇지 않으면 애니메이션이 동작하지 않을 수 있
다.

3. 소개
• 미리 정의된 효과
‒ 토글 방식으로 요소를 보여주고 숨기기
‒ 크기 조절과 동시에 요소를 페이드 인/아웃하기
‒ 슬라이드 업 또는 슬라이드 다운 그리고 토글하기
‒ 페이드 인과 페이드 아웃 그리고 투명도 지정
• 애니메이션을 제어하는데 도움을 주는 여러가지 유틸리티 제공
‒ 요소가 현재 애니메이션되고 있는지 검사하는 :animate 셀럭터
‒ 전반적으로 모든 효과를 켜고 끄는 기능
‒ 미리 만들어 놓은 함수를 애니메이션 큐에 추가하는 기능
‒ 전체 애니메이션 큐를 변경하는 함수
• 애니메이션 속도
‒ Slow : 600ms / fast : 200ms

4. 요소를 슬라이딩 및 페이딩하기
• 컨텐츠의 특정 영역을 눈에 보여지게 하거나 토글이 가능하게
만듦
‒ 단순 보여주기
$(‘#animate’).click(function(){
$(‘.box’).show();
});
‒ 단순한 토글(보였다 안보였다 하게 만듦)
$(‘#animate’).click(function(){
$(‘.box’).toggle();
});
‒ 슬라이드 토글 애니메이션
$(‘#animate’).click(function(){
$(‘.box’).slideToggle(‘slow’);
});

5. 요소를 슬라이딩 및 페이딩하기
‒ 페이드
→ 투명도와 관련된 토글함수는 없기 때문에 fadeIn과 fadeOut을 결합해서 사용
$(‘#animate’).click(function(){
var $box = $(“.box”);
if($box.is(‘:visible’)){
$box.fadeOut(‘slow’);
}else{
$box.fadeIn(‘slow’);
}
});
→혹은 fadeTo 메서드를 사용하여 fade 토글 애니메이션을 만들어 사용
$(‘#animate’).click(function(){
$(‘.box’).fadeTo(‘slow’, ‘toggle’);
});
→그러나 animate 메서드를 사용하는 쪽이 읽기도 편하고 유지보수에 좋다.
$(‘#animate’).click(function(){
$(‘.box’).animate({opacity : ‘toggle’}, ‘slow’);
});

6. 요소를 슬라이딩 및 페이딩하기
‒ 혼합 (페이드 토글 + height 토글)
→ opacity에 더하여 height도 토글
$(‘#animate’).click(function(){
$(‘.box’).animate({
opacity : ‘toggle’,
height : ‘toggle’
}, ‘slow’);
});

7. 위쪽으로 슬라이드하면서 요소를 보이게 하기
• 위쪽으로 슬라이드하면서 컨텐트 블록을 보여지도록
‒ 애니메이션을 적용할 요소를 하단 위치에 붙도록 절대위치 지정
‒ 요소의 높이를 기반으로 하여 토글
$(‘#animate’).click(function(){
var $box = $(“revealUp”);
if($box.height() > 0){
$box.animate({height : 0});
}else{
$box.animate({height : ‘100%’});
}
});
‒ slideToggle()을 사용하지 않는 이유 : 토글이 올바로 동작하기 위해서는 실
제 높이를 어떻게든 알아낼 수 있어야 하기 때문. 높이가 0에서 시작하는
요소의 경우 jQuery가 전체 높이가 얼마나 되는지 알 수 없기 때문
‒ 실제적용…. slideToggle() 잘 동작함 ;;;; 버전차이인가 …. ;;
http://www.mulder21c.com/lab/jQuery/slideToggle.html

8. 수평 아코디언 만들기
• jQuery UI 라이브러리는 훌륭한 수직 아코디언을 제공하나 수평
적으로 동작하는 아코디언을 만들기 위해서는 별도의 CSS 및
별개의 jQUery 코드를 사용해야 한다.
‒ Markup, CSS는 교재 p243, 244 참고
$.fn.horizontalAccordion = function(speed){
return this.each(function () {
var $accordionHeaders = $(this).find(‘h3’),
//$(this) => 아코디언 DIV, 아코디언의 요소 중 클릭 가능한 헤더를 수집
$open = $accordionHeaders.next().filter(‘:first’),
// 열어진 패널을 담고 있는 변수 설정
width = $open.outerWidth();
// 열어진 패널의 너비 알아내기
// initailize the display 출력 초기화
$accordionHeaders.next().filter(‘:not(:first)’).css({display : ‘none’, width : 0 });
// 첫번째 패널이 아닌 것들을 모두 display : none 시키고, width : 0 로 설정
$accordionHeaders.click(function(){
// 헤더를 클릭했을 때 아코디언 효과 줄 이벤트 부여

9. 수평 아코디언 만들기
if($open.prev().get(0) == this){
return;
}
// 선택된 헤더가 현재 열려있는 패널의 헤더와 같으면 동작 안 함
$open.animate({width : 0}, {duration : speed});
// 그 외 모든 패널을 다 speed 동안 width : 0 으로 애니메이트 시킴
$open = $(this).next().animate({width : width}, {duration : speed});
// 선택된 헤더의 패널을 speed 동안 width : width 로 애니메이트 시킴
});
});
}
$(‘#accordionWarpper’).horizontalAccordion(200);

10. 동시에 요소를 슬라이딩하고 페이딩하기
• 동시에 높이와 투명도 모두를 토글하는 애니메이션 함수 만들기
$(‘#animate’).click(function(){
$(‘.box’).animate({opacity : ‘toggle’, height: ‘toggle’});
return false;
});
→ 앞서 7.1 “요소를 슬라이딩 및 페이딩하기” 마지막에 나온 것과 똑같은 거..
우려먹기냐…….. -ㅅ-;;;

11. 순차적인 효과 적용하기
• 어떤 효과 후에 다른 효과가 발생하기 원할 때…
‒ 수동 콜백
→ 순차적 효과를 적용하는 기본 방식은 callback 을 사용하는 것.
특히 이어지는 효과가 이전 효과와 다를 경우에 사용
var $boxes = $(‘.box’).hide();
$(‘#animate’).click(function(){
$boxes.eq(0).fadeIn(‘slow’, function(){
$boxes.eq(1).slideDown(‘slow’);
}
});
$(‘#animate’).click(function(){
// .box 요소들을 hide() 시키고, 그 중 첫 번째 것을 fadein 시킴
$(‘.box’).hide().eq(0).fadeIn(‘slow’, function(){
// fadeIn 된 후 .box 요소들을 hide() 시키고 두 번째 것을 slideDown() 시킴
$(‘.box’).hide().eq(1).slideDown(‘slow’);
}
});

12. 순차적인 효과 적용하기
• 어떤 효과 후에 다른 효과가 발생하기 원할 때…
‒ 자동 순서
→ Dave Methvin의 해결 방법을 기반으로 수많은 요소에 대해 효과를 순차적으로
반복
var $boxes = $(‘.box’).hide();
div = 0;
$(‘#animate’).click(function(){
$($boxes[div++] || []).fadeIn(‘slow’, arguments.callee);
});
• arguments.callee?
- 현재 실행되고 있는 함수를 지칭, 즉 위 function 안에서
$($boxes[div++] || []).fadeIn(‘slow’, arguments.callee);
를 지칭하는 재귀함수 격이 됨

13. 요소들이 현재 애니메이션 중인지 알아내기
• :animate 셀렉터 사용
$(‘#animate’).click(function(){
$(‘.box’).filter(‘:not(:animated)’)
.animate({marginLeft : -10}, speed)
.animate({marginLeft : 10}, speed)
.animate({marginLeft : -10}, speed)
.animate({marginLeft : 10}, speed)
.animate({marginLeft : -10}, speed)
.animate({marginLeft : 10}, speed)
.animate({marginLeft : 0}, speed)
}
‒ .box 요소가 애니메이션 중이 아닐 때만 실행 됨

14. 애니메이션 종료 및 리셋하기
• stop() 메서드를 통해 애니메이션의 희름을 중간에 멈출 수 있다.
$(‘#animate’).hover(function(){
$(‘.box’).stop().fadeTo(200, 1);
}, fucntion(){
$(‘.box’).stop().fadeTo(200, 0);
‒});흠…. 솔직히 차이가 뭔지 모르겠다… ㅠ_ㅠ stop()을 없애도 아무 차이 안난다 ;;;

15. 효과에 사용자 정의 이징(Easing)메서드 사용하기
• jQuery는 swing과 linear라는 두 개의 easing 함수를 내장하고
있는데, 그 외 다른 이징 함수를 사용하고 싶을 때 easing 함수를
수동으로 추가하지 않고, jquery.easing 플러그인을 사용하여 이
미 정의된 컬렉션을 사용
$(‘#animate’).click(function(){
$(‘.box’).({scrollTop : ‘+=100’},
{duration : 400, easing : ‘easeOutElastic’ });
});

16. 모든 효과를 동작하지 않게 하기
• 애니메이션 동작을 하지 않되 animate 메서드와 그 최종 값을
지원
• $.fx.off = true; 를 설정함으로 애니메이션 동작을 않게 함
$.fx.off = true;
// 이후 모든 애니메이션은 동작하지 않음
$(‘#animate’).click(function(){
$(‘.box’).animate({width : ‘+=100’, height : ‘+=100’});
});
• $.fx.off = false; 를 설정하면 다시 동작 가능

17. 고급 효과를 위해 jQuery UI 사용하기
• 복잡한 효과를 만들거나 특별한 효과가 필요한 경우 jQuery UI
라이브러리를 사용
$(‘#animate’).click(function(){
$(‘.box’).toggleClass(‘big’, 2000);
});
$(‘#effect’).click(function(){
$(‘.box’).effect(‘explode’), null, 2000);
});
‒ Chrome 기준 실행 안됨 ;;; -ㅅ- ;;;;

18. END