jQuery의 애니메이션 효과는 무엇입니까?-JS 튜토리얼-php.cn

jQuery의 애니메이션 효과는 무엇입니까?

清浅

풀어 주다： 2018-11-29 09:11:51

원래의

6376명이 탐색했습니다.

jQuery의 애니메이션 효과에는 다음이 포함됩니다: 슬라이딩 효과를 얻기 위한 SlideDown, SlideUp 등; 페이드 인 및 페이드 아웃 효과를 얻기 위한 fadeIn, fadeToggle 등

jQuery에는 많은 흥미로운 효과를 얻는 데 도움이 되는 많은 메서드가 있습니다. 그리고 페이지에 재미있는 애니메이션 효과와 프로그램 코드를 적용하여 효과를 구현하는 것이 원본 JavaScript 코드를 사용하는 것보다 더 편리하고 간결합니다. 오늘은 이 글에서 여러 가지 jQuery 애니메이션 작업 방법을 자세히 소개하겠습니다. 모두의 배움에.

jQuery의 애니메이션 효과는 무엇입니까?

【추천 코스: jQuery animation】

슬라이딩 효과

slideDown()

은 높이 변화에 따라 아래에서 위로 증가하고 슬라이딩 방식으로 표시될 수 있습니다. 숨겨진 content

$(".btn2").click(function(){
$("p").slideDown();
});

로그인 후 복사

slideUp()

높이 변경에 따라 위에서 아래로 축소 가능

$("p").slideUp("slow");

로그인 후 복사

slideToggle([speed],[easing],[fn])

높이 변경에 따라 일치하는 모든 요소의 표시 여부 전환 Sex

예: 단락을 빠르게 위 또는 아래로 밀면 대화 상자가 나타납니다.

$("p").slideToggle("fast",function(){
alert("hello world!"）

로그인 후 복사

페이드 인 및 아웃

fadeIn()

불투명도 변경을 설정하여 일치하는 모든 요소의 페이드 인 효과 달성

예: 200밀리초를 사용하여 단락을 빠르게 페이드 인하면 대화 상자가 나타납니다.

("p").fadeIn("fast",function(){
alert("hello world!");
});

로그인 후 복사

fadeOut()

불투명도 변경을 설정하여 일치하는 모든 요소의 페이드 아웃 효과를 실현하세요

예: 사용 200밀리초만 있으면 단락이 빠르게 페이드 아웃된 다음 대화 상자가 나타납니다.

$("p").fadeOut("fast",function(){
alert("hello world!");
});

로그인 후 복사

fadeTo()

일치하는 모든 요소의 불투명도를 지정된 불투명도에 맞춰 점진적으로 조정합니다.

단락의 투명도를 0.25로 빠르게 조정합니다. 팝업되기 전 200밀리초 안에 약 1/4 표시 대화 상자

$("p").fadeTo("fast", 0.25, function(){
alert("hello world!");
});

로그인 후 복사

fadeToggle()

불투명도 변경을 통해 일치하는 모든 요소의 페이드 인 및 페이드 아웃 효과를 전환합니다

예: 단락을 빠르게 페이드 200ms 후에 대화 상자가 나타납니다

$("p").fadeToggle("fast",function(){
alert("hello world!");
});

로그인 후 복사

사례: 마우스로 버튼을 클릭하면 숨겨진 내용이 표시되고 페이드 아웃됩니다

<body>
       <div id="box">
       <div id="btn">点击这里，显示或隐藏</div>
	<div id="content">jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架)</div>
	</div>
	<script src="jquery/jquery-1.12.4.js"></script>
	<script type="text/javascript">
	     $(function(){
	     	$("#btn").click(function(){
	     		$("#content").slideToggle("slow");
	     		$("#content").fadeToggle("slow");
	     	});
	     });
</script>

로그인 후 복사

효과 추가 전

Image 11.jpg