- 애니메이션처럼 동작하게 만드는 jQuery 기법
jQuery의 기본 effect (효과)
| 메소드 | 의미 |
|---|---|
| show() | 문서 객체를 크게 만들며 보여줌 |
| hide() | 문서 객체를 작게 만들며 사라지게 함 |
| toggle() | show()메소드와 hide() 메소드를 번갈아 가면서 실행 |
| slideDown() | 문서 객체를 슬라이드 효과와 함께 보여줌 |
| slideUp() | 문서 객체를 슬라이드 효과와 함께 사라지게 함 |
| slideToggle() | slideDown() 메소드와 slideUp() 메소드를 번갈아 가면서 실행 함 |
| fadeIn() | 문서 객체를 선명하게 하며 보여줌 |
| fadeOut() | 문서 객체를 흐리게 하며 사라지게 함 |
| fadeToggle() | fadeIn() 메소드와 fadeOut() 메소드를 번갈아 가면서 실행 함 |
🕵️♂️ 작성 방법
$('선택자').메소드명();
$('선택자').메소드명(\[speed]);
$('선택자').메소드명(\[speed], \[easing], \[callback 함수]);- speed : 실행 속도 (밀리세컨) / 숫자값 또는 slow, fast(문자열)
- easing : 변경되는 지점별 속도 / linear , swing (문자열)
- linear : 일정한 속도
- swing : 처음과 끝 부분은 속도가 느리고 중간에는 빨라짐
- callback : 메소드 실행 후 실행할 함수
EX) show, hide, toggle
EX) slideDown, slideUp, slideToggle
EX) fadeIn, fadeOut, fadeToggle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<style>
div {
border: 1px solid red;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<br><button id="btn3">▲</button><br>
<img src="../image/mayo.png" width="200" height="200"><br>
<div>텍스트</div>
<script>
// show, hide, toggle
$('#btn3').click(function() {
var text = $(this).html();
if (text == '▲') {
$(this).html('▼');
$('img').hide(1000);
} else {
$(this).html('▲');
$('img').show(1000);
}
//$('img').toggle(1000);
});
// slideUp, slideDown slideToggle
$('#btn3').click(function() {
var text = $(this).html();
if (text == '▲') {
$(this).html('▼');
//$('img').slideUp(1000);
} else {
$(this).html('▲');
//$('img').slideDown(1000);
}
$('img').slideToggle(1000);
});
// fadeIn, fadeOut, fadeToggle
$('#btn3').click(function() {
var text = $(this).html();
if (text == '▲') {
$(this).html('▼');
//$('img').fadeIn(1000);
} else {
$(this).html('▲');
//$('img').fadeOut(1000);
}
$('img').fadeToggle(1000);
});
</script>
</body></html>animate 함수
- 현재의 css 속성을 설정한 값으로 차츰 변경되는 효과를 주는 메소드
🕵️♂️ 작성방법
$('선택자').animate( { CSS 속성 성정 }, \[speed] , \[easing], \[callback 함수] );EX) animate 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<style>
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
img {
position: absolute;
left: -190px;
}
</style>
</head>
<body>
<button id="btn1">div 버튼1</button><button id="btn2">div 버튼2</button><br>
<button id="btn3">img 버튼1</button><button id="btn4">img 버튼4</button><br>
<img src="../image/mayo.png" width="200" height="200"><br>
<div>텍스트</div>
<script>
$('#btn1').click(function() {
//$('img').animate(css속성, [시간], [속도], [콜백함수]);
$('div').animate({
width: '400px'
}, 5000, 'swing', function() {
$(this).css('border', '5px dashed red');
});
});
$('#btn2').click(function() {
$('div').animate({
width: '100px'
}, 2000, 'linear', function() {
$(this).css('boder', '1px solid red');
})
});
$('#btn3').click(function() {
$('img').animate({
left: '0px'
}, 2000);
})
$('#btn4').click(function() {
$('img').animate({
left: '-190px'
}, 2000);
})
</script>
</body></html>chaining 기법
- 명령을 차례대로 실행할 수 있는 기법
EX) chaining 기법, stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<style>
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
#btn1{
}
</style>
</head>
<body>
<button id="btn1">animate</button><button id="btn2">stop</button> <br>
<img src="../image/mayo.png" width="200" height="200" id="img1"><br>
<div>텍스트</div>
<script>
$('#btn1').click(function(){
$('#img1').hide(1000).show(1000).animate({width:'400px',height:'400px'},2000).slideUp(1000).slideDown(1000).animate({width:'200px',height:'200px'});
});
$('#btn2').click(function(){
$('#img1').stop();
});
</script>
</body></html>
개발자로 매일 한 걸음