![[jQuery] 효과](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOOHWD%2FbtqEPeZC86d%2FK498mpS93alXde0EE96s90%2Fimg.png)
1. 기본 메서드
JQuery는 시각적인 효과를 내기 위해 기본적으로 아래의 메서드를 제공하고 있습니다.
| show() | 화면에 표시합니다. |
| hide() | 화면에서 숨김니다. |
| toggle() | show()와 hide()가 번갈아 실행됩니다. |
| slideDown() | 슬라이드 형태로 표시합니다. |
| slideUp() | 슬라이드 형태로 숨김니다. |
| slideToggle() | slideDown()과 slideUp()을 번갈아 실행합니다. |
| fadeIn() | 페이드 형태로 표시합니다. |
| fadeOut() | 페이드 형태로 숨김니다. |
| fadeToggle() | fadeIn()과 fadeOut()을 번갈아 실행합니다. |
※ 번갈아 실행된다는 의미는 예를 들어 show()일 때 hide()를 한번 수행하고 hide()일 때 show()를 한번 수행한다는 의미입니다.
위 메서드의 기본적인 사용방법은 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('img').show();
});
</script>
</head>
<body>
<img src="http://cliel.com/assets/img/item/home.png">
</body>
</html>단순히 메서드를 호출하는것 이외에 다음과 같이 효과를 나타내는 속도를 지정할 수 있습니다. 속도는 slow, normal, fast를 지정하거나 밀리초단위의 숫자를 지정할 수 있습니다.
$(function () {
$('img').toggle('slow');
});또한 callback을 이용하면 효과 메서드 수행이 완료되었을 때 필요한 메서드를 호출하여 원하는 동작을 수행할 수 있습니다.
$(function () {
$('img').toggle('slow', aniComplete);
});
var aniComplete = function() {
alert('완료');
};마지막으로 효과 메서드를 수행할때 효과가 연출되는 방식을 다음과 같이 지정할 수 있습니다. 이때 사용 가능한 값으로는 swing, linear 등이 있습니다.
$(function () {
$('img').toggle('slow', 'swing', aniComplete);
});
var aniComplete = function() {
alert('완료');
};단, jQuery-UI 를 사용한다면 addClass('myclass',1000)나 removeClass('myclass', 1000)처럼 별도로 시간을 지정해 효과를 구현할 수 있으며 더불어 기본적인 효과연출 방식인 swing, linear 이외에 더 많은 옵션을 지정할 수도 있습니다.
2. 사용자 정의 메서드
jQuery에서 좀더 세분화된 효과를 구현하고자 한다면 animate() 메서드를 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('img').animate({
opacity: 0.2
});
});
</script>
</head>
<body>
<img src="http://cliel.com/assets/img/item/home.png">
</body>
</html>animate의 첫번째 매개변수로는 효과를 나타낼 객체를 지정하는 것입니다. 이때 객체로 지정할 수 있는 속성에는 다음과 같은 것들이 있습니다.
| opacity | height | top | width | left | margin | right | padding | bottom |
만약 위의 속성을 통해 요소의 상태를 변화시키고자 할 때 += 나 -= 를 적용하면 현재 속성의 값에 지정한 값을 더하거나 뺄 수 있습니다.
$(function () {
$('img').animate({
opacity: '-=0.5'
});
});따라서 상기 예제는 현재 opacity값(1)에서 0.5을 뺀 0.5의 값을 opacity 속성 값으로 지정하게 됩니다.
그다음 매개변수는 위에서 설명드린 기본 메서드의 매개변수와 동일합니다.
$(function () {
$('img').animate({
opacity: 0.2
}, 'slow', function() {
alert('완료');
});
});참고로 left와 top 등 위치에 관현 속성을 사용해 요소의 위치를 변경하는 효과를 나타내고자 한다면 요소의 position속성은 absolute혹은 relative여야 합니다. 또한 animate이전에 delayy() 메서드를 동반할 수 있는데 이 메서드는 지정한 시간(밀리초단위) 동안 지연 후 animate메서드를 작동하도록 합니다.
$(function () {
$('img').delay(3000).animate({
opacity: 0.2
}, 'slow', function() {
alert('완료');
});
});animate는 필요에 따라서 여러개를 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
position: relative;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('img').animate({
left: '+=100'
}, 3000).animate({
top: 1000
}, 3000).animate({
width: 500
}, 3000)
});
</script>
</head>
<body>
<img src="http://cliel.com/assets/img/item/home.png">
</body>
</html>
다만 여러번 animate를 지정한다고 해서 한꺼번에 실행되는 것은 아니고 처음 지정된 것부터 순서대로 실행합니다. 이때 중간에 실행을 중단하려면 clearQueue() 메서드를 사용해야 합니다.
$(function () {
$('img').animate({
left: '+=100'
}, 3000).animate({
top: 1000
}, 3000).animate({
width: 500
}, 3000);
setTimeout(function() {
$('img').clearQueue();
}, 6000)
});예제에서는 clearQueue() 메서드를 6초후에 호출하도록 했으므로 left와 top까지만 animate를 수행할 것입니다. 주의해야 할 점은 6초가 아니라 5초 후에 clearQueue() 메서드를 호출한다고 해서 현재 실행 중인 top변경의 animate의 실행이 중단되지는 않는다는 것입니다.
clearQueue() 메서드 호출에 관게없이 현재 실행 중인 animate실행은 끝까지 진행하게 되는데 animate실행에 대한 일시정지가 필요하다면 stop() 메서드를 사용해야 합니다.
$(function () {
$('img').animate({
left: '+=100'
}, 3000).animate({
top: 1000
}, 3000).animate({
width: 500
}, 3000);
setTimeout(function() {
$('img').stop();
}, 5000)
});이번에는 stop() 메서드를 5초정도 후에 실행하도록 했습니다. 이렇게 하면 현재 실행 중인 animate에서 top실행이 2초 정도 진행되다가 중단하고 그 뒤에 width에 관한 animate가 실행됩니다.
결과 화면상으로는 구분하기 힘들지만 조금전 결과와 비교해 보면 이미지가 조금 더 위에서 멈춰져 있는 걸 확인할 수 있습니다.
위 결과를 보면 stop() 메서드를 통해 중단한다고 해서 뒤에 실행될 animate까지 중단하는 것이 아님을 알 수 있습니다. 즉, 현재 실행되고 있는 animate만 영향을 주는 것이죠. stop() 메서드가 호출되는 시점에 뒤에 실행할 모든 animate를 중단하려면 stop(true); 로 메서드를 호출합니다.
$(function () {
$('img').animate({
left: '+=100'
}, 3000).animate({
top: 1000
}, 3000).animate({
width: 500
}, 3000);
setTimeout(function() {
$('img').stop(true);
}, 5000)
});첫 번째 매개변수에 true를 주는 것은 clearQueue()를 호출하는 것과 같기 때문에 앞으로 실행될 모든 animate의 실행을 취소할 수 있게 되는 것입니다.
$(function () {
$('img').animate({
left: '+=100'
}, 3000).animate({
top: 1000
}, 3000).animate({
width: 500
}, 3000);
setTimeout(function() {
$('img').stop(true, true);
}, 5000)
});이번에는 stop() 메서드에 2개의 매개변수를 true로 전달하고 있습니다. 두번째 true는 animate의 최종단계에서 animate를 중단하도록 합니다. 이 말은 현재 실행 중인 animate를 끝까지 수행한다는 뜻이 아닙니다. animate는 지정된 시간에 중단하되 결과만 끝까지 가는 걸 반영할 뿐입니다.
상기 2개의 매개변수의 기본값은 false이므로 그냥 stop()만을 호출하는것은 stop(false, false);와 같은 형태로 호출하는 것과 같습니다.
'Web > JQuery' 카테고리의 다른 글
| [Javascript / jQuery] Ajax (0) | 2020.06.30 |
|---|---|
| [jQuery] 전역함수 (0) | 2020.06.17 |
| [jQuery] 이벤트 다루기 (0) | 2020.06.11 |
| [jQuery] 요소 조작 메서드 (0) | 2020.06.07 |
| [jQuery] 요소 탐색 메서드 (0) | 2020.06.03 |