와우 정말 기대하고 고대하던 강좌입니다.
이번강좌에서 다룰 예제는 아래와 같습니다.
Hide,
Show,
Toggle,
Slide,
Fade,
Animate
jQuery 에서 엘리먼트를 숨기고 보이기
jQuery를 사용하면 HTML엘리먼트들을 숨기고 보여줄 수 있습니다.
hide() and show() 메서드를 쓰면 됩니다.
아래 예제를 실행해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
hide() and show() 는 두개의 파라메터를 사용할 수도 있습니다.
speed와 callback입니다.
문법은 다음과 같습니다.
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 파라메터는 밀리세컨드 값으로 입력해도 되고 "slow", "fast", "normal"로 입력할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
jQuery Toggle
jQuery의 toggle()메서드는 HTML엘리먼트의 show() / hide() 메서드를 토글기능으로 구현할 수 있습니다.
문법은 다음과 같습니다.
$(selector).toggle(speed, callback)
마찬가지로 speed 파라메터는 밀리세컨드 값으로 입력해도 되고 "slow", "fast", "normal"로 입력할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
callback 파라메터는 show / hide가 끝났을 때 실행될 함수의 이름입니다.
jQuery Fade - fadeIn, fadeOut, fadeTo
jQuery fade 메서드를 사용하면 엘리먼트의 opacity 를 점진적으로 변화시킬 수 있습니다.
jQuery는 다음의 fade 메서드를 가지고 있습니다.
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
$(selector).fadeToggle(speed,opacity,callback)
speed 파라메터는 밀리세컨드 값으로 입력해도 되고 "slow", "fast", "normal"로 입력할 수도 있습니다.
callback 파라메터는 동작이 끝났을 때 실행될 함수의 이름입니다.
fadeTo()메서드 안에 있는 opacity 파라메터는 opacity를 주어 사라지게 할 수 있습니다.
[예제1] fadeIn
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
[예제2] fade Out
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
[예제3] fadeToggle
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
[예제4] fadeTo
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different parameters.</p>
<button>Click to fade boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
jQuery Slide - slideDown, slideUp, slideToggle
jQuery slide 메서드를 사용하면 엘리먼트의 높이를 점진적으로 변화시킬 수 있습니다.
jQuery는 다음의 슬라이드 메서드를 가지고 있습니다.
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed 파라메터는 밀리세컨드 값으로 입력해도 되고 "slow", "fast", "normal"로 입력할 수도 있습니다.
callback 파라메터는 슬라이드가 끝났을 때 실행될 함수의 이름입니다.
[예제1] slideDown
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class="flip">Show Panel</p>
</body>
</html>
[예제2]
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
[예제3]
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
jQuery Custom Animations
애니메이션을 만드는 문법은 다음과 같습니다.
$(selector).animate({params},[duration],[easing],[callback])
가장 중요한 것은 params인데. 그것은 애니메이션 될 CSS 속성을 정의합니다.
선택적 속도 매개 변수는 효과의 지속시간을 지정합니다.
duration은 "fast", "normal", "slow" 또는 밀리초의 값을 가질 수 있습니다.
콜백매개변수는 애니메이션이 완료된 후에 실행하는 기능입니다.
[예제1] 간단 애니메이션 예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
주의!
기본적으로 모든 HTML 엘리먼트 자체는 정적인 요소를 가지고 있고, 이동할 수 없습니다.
위치를 조작하려면 먼저 CSS속성을 fixed, relative 또는 absolute로 설정해 주어야 합니다.
[예제2] 여러 속성을 콘트롤 하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
[예제3] 상대값을 이용하여 애니메이션 하기
상대값은 요소의 현재값에 +=이나 -=을 사용합니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
[예제4] 미리 정의된 값을 이용하여 애니메이션 하기
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
[예제5] 큐 기능을 이용하여 애니메이션 하기
기본적으로 jQuery는 애니메이션큐 기능을 제공합니다.
여러애니메이션이 서로 각각 호출될 때 메서드 호출을 순서대로 할 수 있도록 하는 방법입니다.
한번에 모두 실행 되는 것이 아닌 하나하나 실행 시키려 할 때는 다음 예제처럼 하면 됩니다.
참 멋진 예제입니다.
[5-1 예제]
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
[5-2 예제]
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
[예제6] stop()을 사용하여 애니메이션 멈추기
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
[예제7] 콜백함수
자바스크립트는 한 줄 씩 실행됩니다.
그러나 이펙트 코드는 다음줄이 완료되지 않은 경우에도 실행할 수 있습니다.
그래서 오류가 발생할 수 있습니다.
이 문제를 방지하려면 콜백함수를 만들면 됩니다.
현재 이펙트가 끝난 후에 콜백함수가 실행됩니다.
일반적으로
$(선택자).메서드(speed, callback);
형태가 됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
이 예제를 보면 1초동안 사라지고 그후에 얼럿창이 뜰 것 같지만 그렇지 않습니다.
얼럿창이 뜨고 얼럿창을 끄면 사라집니다.
그래서 아래와 같이 콜백구문으로 해 주어야 합니다.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
jQuery Effect Methods
애니메이션 이펙트를 표로 정리해 보았습니다.
| Method | Description |
| animate() | CSS 속성값이 정해진 선택된 엘리먼트의 애니메이션 수행 |
| clearQueue() | 선택된 엘리먼트의 모든 함수queue 제거 |
| delay() | 선택된 엘리먼트의 모든 queue 함수 delay지정 |
| dequeue() | 선택된 엘리먼트의 다음 queue 함수 실행 |
| fadeIn() | 훼이드인 |
| fadeOut() | 훼이드아웃 |
| fadeTo() | 특정한 오퍼시티로 훼이드 |
| hide() | 모든 선택된 엘리먼트 숨김 |
| queue() | 선택된 엘리먼트의 오든 큐함수를 보여줌 |
| show() | 모든 선택된 엘리먼트 보여줌 |
| slideDown() | 선택된 엘리먼트의 높이 점차 낮춤 |
| slideToggle() | 슬라이드를 토글로 구현 |
| slideUp() | 선택된 엘리먼트의 높이 점차 높임 |
| stop() | 선택된 애니메이션의 실행을 중지 |
| toggle() | 선택된 엘리먼트의 hide() and show(), 또는 커스텀 함수 사이에서 토글로 구현 |
'WEB_TECH > jquery' 카테고리의 다른 글
| [jQuery] 8. HTML Set (0) | 2013.04.22 |
|---|---|
| [jQuery] 7. HTML Get (0) | 2013.04.22 |
| [jQuery] 6. jQuery method chaining (0) | 2013.04.22 |
| [jQuery] 4. jQuery이벤트 (0) | 2013.04.22 |
| [jQuery] 3. jQuery 셀렉터 (0) | 2013.04.16 |
| [jQuery] 2. jQuery 문법 (0) | 2013.04.11 |
| [jQuery] 1. jQuery 시작하기 (0) | 2013.04.11 |
