Jquery 애니메이션 기능이란 무엇입니까?-프런트엔드 Q&A-php.cn

Jquery 애니메이션 기능이란 무엇입니까?

青灯夜游

풀어 주다： 2022-05-16 17:04:21

원래의

2875명이 탐색했습니다.

17개의 jquery 애니메이션 함수가 있습니다. 1. 선택한 요소에 사용자 정의 애니메이션을 적용하는 데 사용되는 animate() 2. 선택한 요소를 숨기는 데 사용되는 hide() 3. 선택한 요소를 표시하는 데 사용되는 show() . 요소를 선택합니다. 4. 불투명도를 설정하여 요소를 숨기는 데 사용됩니다. 5. fadeTo() 등.

Jquery 애니메이션 기능이란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

jquery 애니메이션 함수

아래 표에는 애니메이션 효과를 만드는 데 사용되는 모든 jQuery 메서드가 나열되어 있습니다. methoddescription

animate () 선택된 요소에 "사용자 정의"애니메이션을 적용합니다. delay()dequeue()dequeue() fadeIn()fadeOut() fadeTo()fadeToggle()finish()hide()queue()show() SlideDown()slideToggle()slideUp()stop()toggle()

다음은 일반적으로 사용되는 애니메이션 기능입니다.

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>

로그인 후 복사

Jquery 애니메이션 기능이란 무엇입니까?

2, hide(), show() 및ggle()

hide() 메서드는 선택한 요소를 숨깁니다.
show()는 선택한 요소를 표시합니다.
toggle(): hide() 및 show() 메서드 간 전환

예:

요소 숨기기 또는 표시

<!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>

로그인 후 복사

Jquery 애니메이션 기능이란 무엇입니까?

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>

로그인 후 복사

Jquery 애니메이션 기능이란 무엇입니까?

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>

로그인 후 복사

Jquery 애니메이션 기능이란 무엇입니까?

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 애니메이션 기능이란 무엇입니까?

.....

【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】


선택한 요소
대기 중인 모든 함수(아직 실행되지 않음)에 대해 지연을 설정합니다.
대기 중인 다음 함수를 제거한 후 실행합니다. 함수
선택한 요소의 불투명도를 숨김에서 표시로 점진적으로 변경합니다
선택한 요소의 불투명도를 표시에서 숨김으로 점진적으로 변경합니다
선택한 요소를 지정된 불투명도로 점진적으로 변경합니다.
fadeIn()과 fadeOut() 메서드 간 전환
선택한 요소를 중지하고 제거하고 완료합니다. 모든 대기열 애니메이션
선택한 요소 숨기기
선택한 요소의 대기열 기능 표시
선택한 요소 표시
높이를 조정하여 선택한 요소를 슬라이드 및 표시
slideUp() 및 SlideDown() 메소드 간 전환
높이를 조정하여 슬라이드 숨기기 선택한 요소
선택한 요소에서 현재 실행 중인 애니메이션을 중지합니다
hide() 및 show() 메서드 간 전환

위 내용은 Jquery 애니메이션 기능이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!