728x90
jQuery 효과
- show ( ) : 숨겨진 요소가 노출
- hide ( ) : 요소를 숨김
- toggle ( ) :hide(), show() 효과를 적용
- fadeIn ( ) : 숨겨진 요소가 점점 선명해짐
- fadeOut ( ) : 요소가 점점 투명해지면서 사라짐
- fadeTo ( ) :지정한 투명도를 적용
- fadeToggle ( ) : fadeIn(), fadeOut() 효과를 적용
- slideUp ( ) : 요소가 위로 접히며 숨겨짐
- slideDown ( ) : 숨겨진 요소가 아래로 펼쳐짐
- slideToggle ( ) :slideUp(), slideDown() 효과를 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#span0").hide()
});
$("#btn2").click(function(){
$("#span0").show()
});
$("#btn3").click(function(){
$("#span0").toggle()
});
$("#btn4").click(function(){
$("#span1").fadeOut()
});
$("#btn5").click(function(){
$("#span1").fadeIn()
});
$("#btn6").click(function(){
$("#span2").slideUp()
});
$("#btn7").click(function(){
$("#span2").slideDown()
});
});
</script>
<style></style>
</head>
<body>
<button id="btn1">hide()</button>
<button id="btn2">show()</button>
<button id="btn3">toggle()</button><br>
<span id="span0" style="background-color: yellow;">
어려울 때 친구가 진정한 친구이다.</span><br>
<button id="btn4">fadeOut()</button>
<button id="btn5">fadeIn()</button><br>
<span id="span1" style="background-color: skyblue;">
어려울 때 친구가 진정한 친구이다.</span><br>
<button id="btn6">slideUp()</button>
<button id="btn7">slideDown()</button><br>
<span id="span2" style="background-color:pink;">
인내가 세상을 정복한다.<br>
인내가 세상을 정복한다.<br>
인내가 세상을 정복한다.</span>
</body>
</html>
애니메이션 효과
animate ( ) 매써드의 형식 => $("선택자').animate({스타일},실행_시간)
left, right, top, bottom. width, height,margin,padding 등이 있고,
애니메이션 실행시간은 ms 단위를 사용(실행시간을 지정하지 않으면 디폴트로 400ms가 적용)한다.
- animate ( ) : 선택된 요소에 애니메이션 효과
- stop ( ) : 선택된 요소에서 진행 중인 애니메이션을 멈춘다
- delay ( ) : 지정한 시간만큼 지연 후 애니메이션 진행
- queue ( ) : 큐에 사용자 정의 함수를 추가하거나 큐에 대기 중인 함수를 배열에 담아 반환. queue( )메서드 이후의 애니메이션 효과 메서드는 모두 취소
- clearQueue ( ) : 큐에서 처음 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션 모두 제거
- dequeue ( ) : queue( ) 메서드를 이용하면 대기하고 있는 애니메이션 메서드는 제거되지만 dequeue( )메서드는 메서드가 제거되는것을 막을 수 있음.
- finish ( ) : 선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div").animate({ left : "300px", height:"200px", width:"200px"},3000);
$("div").css("background-color","blue");
// 왼쪽에서 300px 떨어지면서, 3초동안 크기가 점점 커지는 파란상자
});
$("#btn2").click(function(){
$("div").animate({left:"0", height:"100px", width:"100px"});
$("div").css("background-color","red");
// 왼쪽으로 붙으면서, 크기가 작아지는 빨간 상자
});
});
</script>
<style>
div {background-color: pink; width: 100px; height: 100px; position: absolute;}
</style>
</head>
<body>
<p>
<button id="btn1">Animation Effects</button>
<button id="btn2">Reset</button></p>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div").animate({width:"200px"},3000);
$("div").animate({height:"200px"},3000);
});
$("#btn2").click(function(){
$("div").stop();
});
});
</script>
<style>
div {background-color: pink; width: 100px; height: 100px; position: absolute;}
</style>
</head>
<body>
<p>
<button id="btn1">Animation Effects</button>
<button id="btn2">Stop</button></p>
<div></div>
</body>
</html>
'일단 해보는 코딩 > jQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 위젯 (2) | 2022.07.14 |
|---|---|
| [jQuery] 이벤트 효과/ 등록 (0) | 2022.07.13 |
| [jQuery] 요소 탐색 (0) | 2022.07.12 |
| [jQuery] 선택자 (0) | 2022.07.12 |
| [jQuery] jQuery의 기초 (0) | 2022.07.11 |