jQuery 효과
jQuery 라이브러리를 사용하면 손쉽게 문서 객체에 효과를 줄 수 있습니다. 최근에는 CSS3를 사용해 애니메이션을 구현하는 방법도 등장했습니다. CSS3로 애니메이션 효과를 적용하면 성능은 좋지만 구 버전의 인터넷 익스플로러에서는 작동하지 않습니다. 여기에서는 jQuery 라이브러리를 사용해 문서 객체에 효과를 줍니다.
5.1 효과 메소드 소개
jQuery 라이브러리는 [표11-9]처럼 문서 객체를 보여 주거나 보이지 않게 만드는 간단한 효과 메소드를 제공합니다. slideDown()과 slideUp()은 메소드 이름에 사라지거나 사라지지 않는다는 의미가 잘 드러나지 않으므로 주의하기 바랍니다.
[표 11-9] jQuery 라이브러리의 간단한 효과 메소드
메소드 |
설명 |
show(속도) |
문서 객체를 크게 하면서 표시 |
hide(속도) |
문서 객체를 작게 하면서 사라짐 |
toggle(속도) |
show() 메소드와 hide() 메소드를 번갈아 실행 |
slideDown(속도) |
문서 객체를 슬라이드 효과와 함께 보여 표시 |
slideUp(속도) |
문서 객체를 슬라이드 효과와 함께 사라지게 함 |
slideToggle(속도) |
slideDown() 메소드와 slideUp() 메소드를 번갈아 실행 |
fadeln(속도) |
문서 객체를 선명하게 하면서 표시 |
fadeOut(속도) |
문서 객체를 흐리게 하면서 사라지게 함 |
fadeToggle(속도) |
fadeln() 메소드와 fadeOut() 메소드를 번갈아 실행 |
모든 간단한 효과 메소드에는 속도를 매개 변수로 입력할 수 있습니다. 속도를 입력하지 않으면 기본 값인 500밀리초가 적용됩니다. 속도에는 밀리초 숫자나 [표 11-10]의 문자열을 입력할 수 있습니다.
[표 11-10] 속도 문자열
속도 문자열 |
속도 |
slow |
600밀리초 |
normal |
500밀리초 |
fast |
400밀리초 |
기본 예제 11-12 태그가 사라지고 나타나는 효과 구현
간단하게 다음 코드처럼 fadeToggle() 메소드를 사용해 봅시다. 코드를 실행하고 버튼을 클리갛면 div 태그에 해당하는 내용이 서서히 사라집니다. 사라진 이후에 버튼을 클릭하면 다시 나타납니다.
[코드 11-20] 사라지고 나타나는 효과
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
// 이벤트를 연결합니다.
$(document).ready(function () {
// 이벤트를 연결합니다.
$('button').click(function () {
// 간단한 효과를 적용합니다.
$('page').fadeToggle('slow');
});
});
</script>
</head>
<body>
<button>Toggle Show</button>
<div class="page">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscding elit. </p>
</div>
</body>
</html>
5.2 애니메이션 기본
문서 객체에 애니메이션을 부여할 때는 animate() 메소드를 사용합니다.
표 11-11 jQuery 라이브러리의 사용자 지정 효과 메소드
메소드 |
설명 |
animate() |
사용자 지정 효과 생성 |
animate() 메소드는 다음 세 가지 형태로 사용합니다. Easing Function 속성가지 포함하면 더욱 다양한 형태로 사용할 수 있습니다. 하지만 기본적인 jQuery 라이브러리로는 거의 사용하지 않으므로 생략합니다.
① $(selector).animate(속성 객체);
② $(selector).animate(속성 객체, 시간);
③ $(selector),animate(속성 객체, 시간, 콜백 함수);
TIP_ Easing Function 속성은 jQuery UI 플러그인에서 사용합니다.
기본 예제 11-13 애니메이션 효과
사각형의 크기를 변경하는 간단한 예제를 만들면서 메소드를 익혀보겠습니다. 다음 코드는 animate() 메소드를 사용해 div 태그의 width 속성과 height 속성을 변경합니다. 코드를 실행하면 사각형이 부드럽게 변형됩니다.
[코드 11-21] 애니메이션 사용
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
// 스타일을 변경합니다.
$('#box').css({
width: 100,
height: 100,
background: 'red'
}).animate){
width: 300,
opacity: 0.5,
}, 500);
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
left, top 속성과 같은 위치 속성을 사용하려면 position 속성을 absolute 똔은 relative로 지정해야 합니다.
TIP_ 기억이 잘 나지 않는다면 6장을 참고하세요.
NOTE_ 메소드 체이닝을 사용한 애니메이션 실행
animate() 메소드는 메소드 체이닝을 사용하면 애니메이션이 종료된 후에도 새로운 애니메이션을 연속해서 실행할 수 있습니다.
[코드 11-22] animate() 메소드 연속 사용
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
// 스타일을 변경합니다.
$('#box').css({
width: 100,
height: 100,
background: 'absolute',
left: 10,
top: 10
})animte({
width: 300,
opacity: 0.5
}, 500)animate({
opacity: 1,
left: 100,
top: 200
}, 500);
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
빨간색 직사각형을 만드는 첫 번째 animate() 메소드가 500밀리초 동안 실행됩니다. 이어서 도형을 이동 시키는 두 번째 animate() 메소드가 500밀리초 동안 실행됩니다. 따라서 최종적으로 1초(1000밀리초)동안 애니메이션이 실행됩니다. 인쇄 매체의 특성상 움직이는 동작을 표현하기가 어려우므로 코드를 직접 실행해 결과를 확인하기 바랍니다.
NOTE_ 상대적 증가
jQuery 라이브러리의 animate() 메소드에는 조금 재미있는 기능이 있습니다. 정확한 숫자가 아니라 [코드 11-23]처럼 '+=숫자' 형태의 문자열을 입력하면 현재 속성에서 위치 또는 크기를 상대적으로 변환합니다. 실행해서 확인해 보세요.
[코드 11-23] animate() 메소드 상대 적용
<script>
$(document).ready(function () {
// 스타일을 변경합니다.
$('#box').css({
width: 100,
height: 100,
background: 'red',
position: 'absolute',
left: 10,
top: 10
}).animate({
height: '+=300',
width: '-=50',
left: '+=300',
opacity: 0.5
}, 500);
});
</script>
5.3 애니메이션 정지
jQuery 라이브러리는 animate() 메소드 또는 delay() 메소드를 사용해 [그림 11-6]처럼 애니메이션을 예약합니다. 차곡차곡 들어간 애니메이션은 동시에 실행된은 것이 아니라 차례대로 실행됩니다.
[표 11-12]의 애니메이션 정지 메소드를 사용하면 애니메이션을 잠시 멈추거나 중지시킬 수 있습니다.
[표 11-12] 애니메이션 정지 메소드
메소드 |
설명 |
delay() |
애니메이션을 특정 시간만큼 정지 |
stop() |
애니메이션을 완전히 정지 |
우선 delay() 메소드를 살펴보겠습니다. delay() 메소드를 사용하면 animate() 메소드 사이에 간격을 줄 수 있습니다. 다음 코드처럼 animate() 메소드 사이에 입력합니다. 다른 곳에도 입력할 수 있지만 효과가 없습니다.
$('h1').animate({ }).delay(1000).animate({ });
이번에는 stop() 메소드를 살펴보겠습니다. delay() 메소드에는 매개 변수로 숫자를 입력했지만 stop() 메소드에는 불을 입력합니다.
$('h1').stop(clearQueue, goToEnd);
매개 변수 clearQueue의 기본 값은 false로 현재 실행 중인 애니메이션만 멈추지만, true를 입력하면 예약된 모든 애니메이션을 제거합니다. 매개 변수 goToEnd는 애니메이션을 중지할 때 어떠한 상태로 종료할지를 지정합니다. 예를 들어 다음 코드처럼 애니메이션을 만들었다고 가정합시다.
$('#box').css({
width: 100,
}).animate({
width: 200
});
매개 변수 goToEnd를 사용하지 않고애니메이션 진행 중에 stop() 메소드를 사용하면 그 시점에서 애니메이션이 멈춥니다. 코드에서는 width 속성을 200px까지 증가시키라고 했지만, 현재 상태에서 멈추기 때문에 100px과 200px 사이에 있습니다.
하지만 매개 변수 goToEnd를 사용하면 애니메이션이 멈추었을 때 animate() 메소드에서 지정한 최종 수치로 변경해서 정지합니다. 말이 조금 어려우므로 예제를 살펴보겠습니다.
기본 예제 11-14 애니메이션 효과 정지
다음 코드는 간단한 입력 양식을 사용해 각 매개 변수를 조절할 수 있게 합니다. 코드를 실행하면 빨간색 상자의 길이가 변하는 애니메이션을 3초 주기로 반복합니다. 애니메이션이 시행되는 동안 매개 변수 clearQueue와 goToEnd를 조절하고 버튼을 클릭해서 어떤 방식으로 작동하는지 직접 확인합니다.
[코드 11-24] 애니메이션 효과 컨트롤
<!DOCTYPE html>
<html>
<head>
<title>Animation Basic</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
// 변수를 선언합니다.
var clearQueue = false;
var goToEnd = false;
// 이벤트를 연결합니다.
$('#clearQueue').change(function () {
clearQueue = $(this).prop('checked')
});
$(#goToEnd').change(function () {
goToEnd = $(this).prop('checked');
});
$(#stopButton').click(function () {
$('#box').stop(clearQueue, goToEnd);
});
// 스타일을 변경합니다.
$('box').css({
width: 100,
height: 100,
background: 'red'
})
// 타이머를 연결합니다.
setInterval(function () {
$('#box').animate({
width: 200
}, 1000).delay(1000).animate({
width: 100,
height: 100
}, 1000);
}, 3000);
});
</script>
</head>
<body>
<!-- 입력 양식 -->
<label>clearQueue</label>
<input id="clearQueue" type="checkbox" />
<br />
<label>goToEnd</label>
<input id="goToEnd" type="checkbox" />
<br />
<button id="stopButton">stop</button>
<!-- 애니메이션 -->
<div id="box"></div>
</body>
</html>
'프로그래밍 > Javascript' 카테고리의 다른 글
| 자바스크립트와 jQuery 라이브러리 응용 (0) | 2017.08.18 |
|---|---|
| jQuery 이벤트 (0) | 2017.08.16 |
| jQuery 문서 객체 조작 (0) | 2017.08.14 |
| jQuery 문서 객체 선택 (0) | 2017.08.14 |
| jQuery 라이브러리 설정 (0) | 2017.08.14 |
