๐ปEffect
์น ํ์ด์ง์์ ์์์ ํ๋ฉด ํ์๋ฅผ ๋์ ์ผ๋ก ๋ณ๊ฒฝํ๋ ๋์ ํจ๊ณผ๋ฅผ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ด๋ค.
์ด๋ฅผ ํตํด ํ์ด์ง์ ๋์ ์ด๊ณ ๋งค๋๋ฌ์ด ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ถ๊ฐํ ์ ์๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex04_effect</title>
<style>
#box {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: gold;
}
</style>
</head>
<body>
<h1>jQuery Effect</h1>
<input type="button" value="๋ฒํผ1" id="btn1" class="btn">
<input type="button" value="๋ฒํผ2" id="btn2" class="btn">
<input type="button" value="๋ฒํผ3" id="btn3" class="btn">
<hr>
<div id="box">์์</div>
<script src="../asset/js/jquery-1.12.4.js"></script>
</body>
</html>๐ปEffect ์ข ๋ฅ
1. hide(time), show(time), toggle(time)
- hide : ์จ๊ธฐ๊ธฐ
- show : ๋ณด์ด๊ธฐ
- toggle : ์จ๊ธฐ๊ธฐ/๋ณด์ด๊ธฐ
- time : ๋ฐ๋ฆฌ์ธ์ปจ๋ ๊ธฐ์ค์ด๋ค.
- 'fast', 'slow' ํค์๋๋ก ์๋ ์ง์ ์ด ๊ฐ๋ฅํ๋ค.
<script>
$('#btn1').click(function() {
$('#box').hide(1000);
});
$('#btn2').click(function() {
$('#box').show(1000);
});
$('#btn3').click(function() {
$('#box').toggle(1000);
});
</script>
2. fadeOut(time), fadeIn(time), fadeToggle(time)
- fadeOut(time) : ์์ํ ๋ํ๋๊ฒ ํ๋ค.
- fadeIn(time) : ์์ํ ์ฌ๋ผ์ง๊ฒ ํ๋ค.
- fadeToggle(time) : ๋ํ๋ ์์ผ๋ฉด ์ฌ๋ผ์ง๊ฒ, ์ฌ๋ผ์ ธ ์์ผ๋ฉด ๋ํ๋๊ฒ ํ๋ค.
<script>
$('#btn1').click(function() {
$('#box').fadeOut(1000);
});
$('#btn2').click(function() {
$('#box').fadeIn(1000);
});
$('#btn3').click(function() {
$('#box').fadeToggle(1000);
});
</script>
3. slideUp(time), slideDown(time), slideToggle(time)
- slideUp(time) : ์๋ก ์ฌ๋ผ์ด๋ํ์ฌ ์ฌ๋ผ์ง๊ฒ ํ๋ค.
- slideDown(time) : ์๋๋ก ์ฌ๋ผ์ด๋ํ์ฌ ๋ํ๋๊ฒ ํ๋ค.
- slideToggle(time) : ๋ํ๋ ์์ผ๋ฉด ์ฌ๋ผ์ง๊ฒ, ์ฌ๋ผ์ ธ ์์ผ๋ฉด ๋ํ๋๊ฒ ํ๋ค.
<script>
$('#btn1').click(function() {
$('#box').slideUp(1000);
});
$('#btn2').click(function() {
$('#box').slideDown(1000);
});
$('#btn3').click(function() {
$('#box').slideToggle(1000);
});
</script>
4. animate(๊ฐ์ฒด)
- ์ฌ์ฉ์ ์ ์ ํจ๊ณผ
- ๋ง์๋๋ก ํ๋กํผํฐ์ ๊ฐ์ ์ง์ ํ ์ ์์ด ์กฐ์ํ๊ธฐ ํธํ๋ค.
๐ปanimate
animate ์ ์ฉ๋ฐฉ๋ฒ
์ ํํ์ animate ์ ์ฉํ๋ ๋ฐฉ๋ฒ
$('#btn1').click(function() {
const obj = {
width: '400px',
height: '400px'
};
$('#box').animate(obj);
});
์๋ตํ ๋ฐฉ๋ฒ
$('#btn1').click(function() {
$('#box').animate({
width: 400,
height: 400
});
});
animate์ ๋์
animate์ ๋์์ ์ซ์ํ๋ง ๊ฐ๋ฅํ๋ค
display : none ๊ณผ ๊ฐ์ด ์ซ์ํ์ด ์๋ ํ๋กํผํฐ๋ ์ ์ฉ์ด ์๋๋ค.
$('#box').animate({
width: 400,
height: 400,
// display : none
opacity: 0
});
๋จ์ ์๋ต
๋จ์๊ฐ ์๋ต๋๋ฉด px์ผ๋ก ์์์ ์ธ์ํ๋ค.
$('#btn1').click(function() {
// box.style.width = parseInt(box.style.width) + 100 + 'px'
$('#box').animate({
width: '+=100px',
height: '+=50'
})
});
์์ฑ ํ๊ธฐ๋ฒ
์บ๋ฉ ํ๊ธฐ
marginLeft: '+=50px'
๋ฌธ์์ด ํ๊ธฐ
'margin-left' : '+=50'
animate์ ๋งค๊ฐ๋ณ์
animate์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด properties, duration, function ์ธ ๊ฐ์ง ๋งค๊ฐ๋ณ์๊ฐ ์๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
์๋์ ๊ฐ์ด ์์ฑํ๋ค.
$('#btn1').click(function() {
$('#box').animate({
'margin-left' : '+=50'
}, 1000, function() {
alert('์ ๋๋ฉ์ด์
์ด ๋๋ ๋ ํ๊ณ ์ถ์ ์ผ');
})
});
์ฌ๋ฌ ํจ๊ณผ ์ ์ฉ
์ฌ๋ฌ ํจ๊ณผ๋ฅผ ์ ์ฉํ๋ ๊ฒฝ์ฐ, ํจ์ ๋ด์ ํจ์๋ฅผ ์์ฑํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค.
ํจ์ ๋ด์ ํจ์๊ฐ ์กด์ฌํ๋ ๋ถ๋ถ์ด ๊ฐ๋ ์ฑ์ ๋จ์ดํธ๋ฆฐ๋ค.
1. ํจ์ ๋ด ํจ์ ์์ฑ
$('#btn2').click(function() {
$('#box').animate({
width: '400px'
}, 600, function() {
$('#box').animate({
height: '400px'
}, 600);
});
});
2. ํจ์ ๋ถ๋ฆฌ
ํจ์๋ฅผ ๋ถ๋ฆฌํ์ฌ๋ ์์๋๋ก ์๋ํ๋ค.
$('#btn2').click(function() {
$('#box').animate({
width: '400px'
});
$('#box').animate({
height: '400px'
});
});์งํ์ค์ธ effect๊ฐ ์์ผ๋ฉด ๋ค์ ์๋ effect๊ฐ ๋ธ๋ญ ์ฒ๋ฆฌ๋๋ค.
ํ์ง๋ง ์ด ์ฝ๋๋ ํจ๊ณผ๊ฐ ๊ฐ์ด ์ ์ฉ๋๋์ง ์์๋๋ก ์ ์ฉํ๋์ง ํท๊ฐ๋ฆฐ๋ค.
3. ๋ฉ์๋ ์ฒด์ธ
$('#btn2').click(function() {
$('#box').animate({
width: '400px'
}).animate({
height: '400px'
});
});animate๊ฐ $('#box')๋ฅผ ๋ฐํํ์ฌ ๋ค์ effect๋ฅผ ์ค๋ค.
๋ฉ์๋ ์ฒด์ธ ํํ๋ฅผ ์ ๊ณตํ๋ค.
๋ฉ์๋ ์ฒด์ธ
๋๋ถ๋ถ์ jQuery ๋ฉ์๋๋ ๋ฐํ๊ฐ์ด jQuery ๊ฐ์ฒด์ด๋ค.
animate๋ ๋ฆฌํด๊ฐ์ ๊ฐ์ง๊ณ ์๋๋ฐ ์์ ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค. ์ด ํน์ง์ด ๋ฉ์๋ ์ฒด์ธ์ ๊ฐ๋ฅํ๊ฒ ํ๋ค.
$('#btn2').click(function() {
$('#box')
.slideUp()
.slideDown()
.fadeOut()
.fadeIn()
.animate({
borderWidth: '10px'
});
});๊ฐ๋ ์ฑ ์ข๊ฒ ์ฝ๋๋ฅผ ์ ๋ ฌํ ์ ์๋ค.
