▶ effect 속성 제어하기
💻 예제 설명
이 전 글에서 각 요소를 effect 효과를 주는 방법에 대해 포스팅을 했었다.
하지만 일반적인, 자주 사용하는 방식으로의 사용법만 얘기했었는데
이제 이 모든 효과를 좀 더 세부적으로 컨트롤할 수 있는 속성에 대해서 정리를 해보려고 한다.
이 속성을 이용하면 좀 더 고급지게 여러 행위들을 섞어서 할 수 있거나
움직이는 시간을 체크해 해당 시간 때에 멈춘다거나,
움직이는 행위가 끝나면 바로 이어서 다른 움직임을 실행한다거나
등등등 여러 가지 스킬을 구현할 수가 있다.
jQuery에서 효과를 줄 수 있는 메서드에서 전부 이 속성이 공통적으로 사용이 가능하니
아래 효과를 주는 메서드는 전부 공통적으로 속성 사용법이 같다.
| show | hide | toggle |
| fadeIn | fadeOut | fadeToggle |
| slideDown | slideUp | slideToggle |
| fadeTo | animate |
기본 Syntax (위 메서드 중 show ~ fadeTo 까지)
// 기본 속성 사용 Syntax
$('선택요소').메서드({
duration: 3000, // slow, fast 밀리세컨즈(1000 = 1초)
start:function(){ // 행동이 시작할 때 호출
console.log('행동이 시작할 때 호출 됩니다.');
},
done:function(){ // 행동이 끝날 때 호출
console.log('행동이 끝날 때 호출 됩니다.');
},
fail:function(){ // 행동이 멈출 때 호출 (이건 stop() 메서드를 이용해서 멈췄을 때 호출)
console.log('행동이 멈출 때 호출됩니다. (이건 stop() 메서드를 이용해서 멈췄을 때 호출)');
},
progress:function(){ // 행동이 진행되고 있는 동안 계속 호출
console.log('계속 호출 중...');
},
step:function(time){ // 행동이 진행되고 있는 동안 시간타이머
console.log(time); // 위 duration 시간 동안 시간이 찍힘
},
always : function(){ // 행동이 멈추거나 or 끝날 때 호출
console.log('행동이 멈추거나 or 끝날 때 호출 합니다.'); // 멈추는 경우는 stop() 메서드를 사용하여 멈췄을 경우
}
});
기본 Syntax (animate)
// 기본 속성 사용 animate메서드 Syntax
$('선택요소').animate({
// 이 위치에는 animate의 행동을 할 프로퍼티와 값을 정의하는 부분
opacity:'0.5', // 요소를 불투명 0.5 수치로 animate 한다.
height:'200px', // 요소를 높이 200px 로 animate 한다.
width:'200px' // 요소를 가로 200px 로 animate 한다.
},{
duration: 3000, // slow, fast 밀리세컨즈(1000 = 1초)
start:function(){ // 행동이 시작할 때 호출
console.log('행동이 시작할 때 호출 됩니다.');
},
done:function(){ // 행동이 끝날 때 호출
console.log('행동이 끝날 때 호출 됩니다.');
},
fail:function(){ // 행동이 멈출 때 호출 (이건 stop() 메서드를 이용해서 멈췄을 때 호출)
console.log('행동이 멈출 때 호출됩니다. (이건 stop() 메서드를 이용해서 멈췄을 때 호출)');
},
progress:function(){ // 행동이 진행되고 있는 동안 계속 호출
console.log('계속 호출 중...');
},
step:function(time){ // 행동이 진행되고 있는 동안 시간타이머
console.log(time); // 위 duration 시간 동안 시간이 찍힘
},
always : function(){ // 행동이 멈추거나 or 끝날 때 호출
console.log('행동이 멈추거나 or 끝날 때 호출 합니다.'); // 멈추는 경우는 stop() 메서드를 사용하여 멈췄을 경우
}
});
duration : 시간을 적는 곳이다. (slow, fast, 밀리 세컨즈(1000 = 1초)
start 함수 : 해당 메서드(효과 메서드)가 실행이 되면 호출한다.
done 함수 : 해당 메서드(효과 메서드)가 끝나면 호출된다.
fail 함수 : stop() 메서드로 현재 진행하고 있는 효과 메서드가 중지되면 호출된다.
progress 함수 : 효과 메서드가 시작부터 끝날 때까지 계속 호출된다.
step 함수 : 효과 메서드가 시작부터 끝날 때까지 계속 호출되는데 time이라는 변수에 시간이 찍힌다.
always 함수 : 효과 메서드의 행동이 멈추거나 or 끝나면 호출된다.
이제 테스트할 예제 설명을 해보겠다.
테스트할 effect 효과 메서드는 (fadeOut, show, fadeTo) 3개 메서드를 사용하는 테스트를 진행할 건데,
버튼을 총 4개 만들어서
fadeOut 실행 버튼, show 실행 버튼, fadeTo 실행 버튼, 멈춤 버튼 이렇게 4개를 만들어서 각각
이 효과(effect) 메서드들을 실행할 때, 위 속성(옵션 메서드)이 어떻게 호출되는지 알아보자.
테스트 방법은
첫 번째 버튼 하나씩 순서대로 클릭해서 각 행위들이 끝나면 다시 다른 버튼을 클릭하여 속성을 보는 방법
두 번째 버튼 하나씩 순서대로 클릭하되 각 행위들이 끝나기 전에 다른 버튼을 클릭하여 속성을 보는 방법
이 두 가지 방법 이외도 버튼을 여러 가지 눌러서 테스트를 진행해보자.
그럼 이 속성(옵션 메서드)들이 어떻게 호출되고 어느 시점에 호출이 되고 또 어떤 이유로 호출이 되는지
이해해보고 이러한 속성들을 이용하여 좀 더 고급진 요소 효과(effect)를 사용할 수 있게 해 보자.
🖥 소스 예제
소스 예제는 하나만 예로 들어서 테스트를 진행해보려고 한다.
그리고 속성(옵션 메서드)을 전부 한 번씩 사용하는 테스트를 해보자.
아래 소스를 복사하여 본인 스스로 HTML 문서를 만들어서 복사 붙여 넣기 해서 여러 번 테스트를 진행해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $con = $('#content');
var nProgress = 0;
$('.btnAct').on('click', function(e){
if($con.is(':animated')) $con.stop();
switch(Number(e.target.id.split('-')[1])){
case 1:
fadeAct();
break;
case 2:
showAct();
break;
case 3:
fadeToAct();
break;
}
});
$('#stop').on('click' ,function(){
$con.stop();
});
function fadeAct(){
$con.fadeOut({
duration: 5000,
start:function(){
$('#start').text('fadeOut 메서드가 시작.');
},
done:function(){
$('#done').text('fadeOut 메서드가 종료.');
nProgress = 0;
},
fail:function(){
$('#fail').text('fadeOut 메서드가 stop() 메서드로 인해 종료되었습니다.');
nProgress = 0;
},
progress:function(){
$('#progress').text('fadeOut 메서드가 계속 호출 중입니다.... : ' + nProgress++);
},
step:function(time){
$('#step').text('fadeOut 메서드가 진행되고 있는 시간동안의 타이머 입니다. : ' + time);
},
always : function(){
$('#always').text('fadeOut 행동이 멈추거나 or 끝날 때 호출 합니다.');
nProgress = 0;
}
});
}
function showAct(){
$con.show({
duration: 'fast',
start:function(){
$('#start').text('show 메서드가 시작.');
},
done:function(){
$('#done').text('show 메서드가 종료.');
nProgress = 0;
},
fail:function(){
$('#fail').text('show 메서드가 stop() 메서드로 인해 종료되었습니다.');
nProgress = 0;
},
progress:function(){
$('#progress').text('show 메서드가 계속 호출 중입니다.... : ' + nProgress++);
},
step:function(time){
$('#step').text('show 메서드가 진행되고 있는 시간동안의 타이머 입니다. : ' + time);
},
always : function(){
$('#always').text('show 행동이 멈추거나 or 끝날 때 호출 합니다.');
nProgress = 0;
}
});
}
function fadeToAct(){
$con.fadeTo({
duration: 3000,
start:function(){
$('#start').text('fadeTo 메서드가 시작.');
},
done:function(){
$('#done').text('fadeTo 메서드가 종료.');
nProgress = 0;
},
fail:function(){
$('#fail').text('fadeTo 메서드가 stop() 메서드로 인해 종료되었습니다.');
nProgress = 0;
},
progress:function(){
$('#progress').text('fadeTo 메서드가 계속 호출 중입니다.... : ' + nProgress++);
},
step:function(time){
$('#step').text('fadeTo 메서드가 진행되고 있는 시간동안의 타이머 입니다. : ' + time);
},
always : function(){
$('#always').text('fadeTo 행동이 멈추거나 or 끝날 때 호출 합니다.');
nProgress = 0;
}
}, 0.5);
}
});
</script>
<style type="text/css">
#content{
width: 100px;
height: 100px;
background-color: red;
}
button{
vertical-align: top;
}
</style>
</head>
<body>
<div>
<button class="btnAct" id="act-1">fadeOut 행동</button>
<button class="btnAct" id="act-2">show 행동</button>
<button class="btnAct" id="act-3">fadeTo 행동</button>
<button id="stop">멈춤</button>
<div>
<p id="start">대기중...</p>
<p id="done">대기중...</p>
<p id="fail">대기중...</p>
<p id="progress">대기중...</p>
<p id="step">대기중...</p>
<p id="always">대기중...</p>
</div>
</div>
<hr>
<div id="content"></div>
</body>
</html>
💻 예제 구동 설명
위 소스 예제 테스트 구동 설명을 해보면
첫 번째 방법 순서대로 하나씩 클릭하여 예제가 어떻게 구동되는지 설명을 해보겠다.
두 번째 방법은 각자가 테스트해보고 확인해보자.
이 포스팅에서 말하고자 하는 의미는 또는 전달하고자 하는 메시지는
위 예제 테스트를 각자가 여러 각도에서 해보고 각 효과 메서드에 따라 속성 (옵션 메서드)이 어떻게 어느 시점에 호출되고, 어떤 이유로 실행이 되고 하는 부분이 핵심이니 속성이 어떻게 왜 되는지 알아야 하는 게 핵심이다.
이제 구동 설명을 해보자.
fadeOut 행동 버튼을 클릭 시
처음 fadeOut 버튼을 클릭하기 전 화면에서 버튼을 클릭하면
| 속성(옵션 메서드) | text 멘트 | 설명 |
| start | fadeOut 메서드가 시작. | fadeOut 메서드가 실행이되면 맨 처음 시작(호출)된다. |
| done | fadeOut 메서드가 종료 | fadeOut 메서드의 행위가 완전히 종료가 되면 호출된다. |
| fail | 대기중... | stop() 이란 메서드로 호출이 안 되었기 때문에 처음 (대기중...) 상태 그대로 |
| progress | fadeOut 메서드가 계속 호출 중입니다..... : 숫자카운딩 | fadeOut행위가 진행되고 있는 중에 계속해서 호출이 된다. 식별을 가능하게 하려고 일부러 숫자 카운팅을 해놨다. |
| step | fadeOut 메서드가 진행되고 있는 시간동의 타이머 입니다. : 시간(타이머) | fadeOut 행위가 진행되고 있는 중에 계속해서 호출이 되는데 함수에 time 으로 매개변수(인자)를 받는데 이것을 console.log로 찍어보면 타이머가 찍힌다. |
| always | fadeOut 행동이 멈추거나 or 끝날 때 호출합니다. | fadeOut 메서드의 행위가 무조건 멈출때 호출된다. stop() 메서드로 인해 멈췄건, 아예 행위가 시간이 다되어 머췄건 간에 그냥 행위가 멈추면 호출된다. |
show 행동 버튼을 클릭 시
fadeOut 행위가 바로 끝난 상태에서 show 행동 버튼을 클릭하여 진행했다.
이 show 행동 버튼도 fadeOut 속성(옵션 메서드) 설명과 똑같다.
그래서 결과 이미지만 보자면 fadeOut 행위가 끝난 시점이니까 빨간(div) 박스가 fadeOut 된 상태에서
show 행동을 fast 속도로의 시간 동안 빨간(div) 박스가 보인다.
fadeTo 행동 버튼을 클릭 시
이렇게 fadeTo 행동도 fadeOut 속성(옵션 메서드)을 설명과 같기 때문에 패스하고,
해동을 설명하자면
show 행동으로 인해 div요소 빨간 박스가 보이는 상태에서 예제 소스에서 설정한
불투명 수치를 0.5로 fadeTo행동을 함으로 결과 이미지에서 확인할 수 있듯이
빨간 박스가 불투명도 0.5 가 적용된 것을 확인할 수 있다.
이렇게 3개의 효과 버튼을 만들어서 각 속성(옵션 메서드)이 어떻게 호출이 되고, 실행되는지
테스트를 해봤는데 저 중에 대기 중...이라는 부분만 한 번도 호출이 되지 않았다.
저 속성 메서드는 fail 메서드인데 이 메서드는 위 설명에서 말했듯이 stop() 메서드로 멈춰야만
호출이 된다. 그래서 두 번째 테스트 방식인 이것저것 다른 행위를 시도하고, 멈춤 버튼으로 멈춰도 봤다가
하는 테스트는 본인 스스로 해보고 fail 메서드가 호출이 되는지도 확인해보자.
이처럼 jquery는 효과 메서드(show, hide, toggle, fadeIn, fadeout, slideUp, animate 등등등....)는
이 포스팅에서 설명한 속성을 사용하여 좀 더 고급진 효과를 줄 수가 있다.
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - animate(애니메이트) 메서드로 모션 만들기 (queue 메서드 사용), 큐 사용 (0) | 2022.05.19 |
|---|---|
| jQuery - animate(애니메이트) 메서드 사용법, 실행 후 다른 코드 실행(callback) (0) | 2022.05.18 |
| jQuery - slideToggle(슬라이드토글) 메서드, 실행 후 다른 코드 실행(callback) (0) | 2022.05.16 |
| jQuery - slideUp(슬라이드업) 메서드, 실행 후 다른 코드 실행(callback) (0) | 2022.05.16 |
| jQuery - slideDown(슬라이드다운) 메서드, 실행 후 다른 코드 실행(callback) (0) | 2022.05.16 |