animate () | 선택된 요소에 "사용자 정의"애니메이션을 적용합니다. |
delay()
| 선택한 요소 |
|
dequeue()
| 대기 중인 모든 함수(아직 실행되지 않음)에 대해 지연을 설정합니다. |
|
dequeue()
| 대기 중인 다음 함수를 제거한 후 실행합니다. 함수 |
|
fadeIn()
| 선택한 요소의 불투명도를 숨김에서 표시로 점진적으로 변경합니다 |
|
fadeOut()
| 선택한 요소의 불투명도를 표시에서 숨김으로 점진적으로 변경합니다 |
|
fadeTo()
| 선택한 요소를 지정된 불투명도로 점진적으로 변경합니다. |
|
fadeToggle()
| fadeIn()과 fadeOut() 메서드 간 전환 |
|
finish()
| 선택한 요소를 중지하고 제거하고 완료합니다. 모든 대기열 애니메이션 |
|
hide()
| 선택한 요소 숨기기 |
|
queue()
| 선택한 요소의 대기열 기능 표시 |
|
show()
| 선택한 요소 표시 |
|
SlideDown()
| 높이를 조정하여 선택한 요소를 슬라이드 및 표시 |
|
slideToggle()
| slideUp() 및 SlideDown() 메소드 간 전환 |
|
slideUp()
| 높이를 조정하여 슬라이드 숨기기 선택한 요소 |
|
stop()
| 선택한 요소에서 현재 실행 중인 애니메이션을 중지합니다 |
|
toggle()
| hide() 및 show() 메서드 간 전환 |
|
다음은 일반적으로 사용되는 애니메이션 기능입니다.
1.animate()
animate() 메소드는 CSS 속성 세트의 사용자 정의 애니메이션을 수행합니다.
이 방법은 CSS 스타일을 통해 요소를 한 상태에서 다른 상태로 변경합니다. CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 만들 수 있습니다.
숫자 값만 애니메이션화할 수 있습니다(예: "여백:30px"). 문자열 값은 애니메이션화할 수 없습니다(예: "배경색:빨간색").
팁: 상대 애니메이션을 만들려면 "+=" 또는 "-="를 사용하세요.
예: 높이를 변경하여 요소에 애니메이션을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#box").animate({
height: "300px"
});
});
$("#btn2").click(function() {
$("#box").animate({
height: "100px"
});
});
});
</script>
</head>
<body>
<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
2, hide(), show() 및ggle()
예:
요소 숨기기 또는 표시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide();
});
$(".btn2").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>
</html>
3, SlideUp(), SlideDown() 및 SlideToggle()
slideUp() 메서드: 선택한 요소를 슬라이딩 방식으로 숨깁니다.
slideDown() 메서드: 선택한 요소를 슬라이딩 방식으로 표시합니다.
slideToggle() 메서드: SlideUp()과 SlideDown() 메서드 간 전환
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideUp();
});
$(".btn2").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
</html>
4, fadeIn() , fadeOut()을 밀어 요소 숨기기 fadeToggle()
fadeIn() 메서드는 선택한 요소의 불투명도를 숨겨진 상태에서 표시되는 상태로 점진적으로 변경합니다(페이딩 효과).
fadeOut() 메서드는 선택한 요소의 불투명도를 표시에서 숨김(페이드 효과)으로 점진적으로 변경합니다.
fadeToggle(): fadeIn()과 fadeOut() 메서드 간 전환
예: 페이드인 효과를 사용하여
요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").fadeOut()
});
$(".btn2").click(function() {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
</html>
5, fadeTo()
표시 fadeTo() 메서드는 선택한 요소의 불투명도를 지정된 값으로 점진적으로 변경합니다(페이딩 효과).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").fadeTo(1000, 0.4);
});
});
</script>
</head>
<body>
<button>逐渐改变P元素的不透明度</button>
<p>这是一个段落。</p>
</body>
</html>
.....
【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】
