jQuery로 페이지의 애니메이션 효과를 구현하는 방법(예제 코드)

애니메이션 효과를 구현할 수 있는 다양한 함수가 있습니다. 중에서 animate 함수는 가장 일반적인 함수 중 하나입니다. 다음은 이 함수의 사용 방법에 대한 간단한 설명입니다.

animate 함수 기본 형식

animate를 통해 애니메이션 효과를 구현하는 기본 형식은 다음과 같습니다：

$(selector).animate({params},speed,callback);

중에서 {params}는 필수 항목으로, 객체로서 애니메이션 효과를 통해 요소가 가지고자 하는 CSS 스타일을 지정합니다. speed와 callback은 모두 선택 사항으로, speed는 애니메이션의 속도를 지정하며, 값은 숫자 타입(예를 들어1000을 의미하며, 애니메이션이1s 내부에서 params 지정 스타일로 변환되며, slow 및 fast가 있습니다. callback은 애니메이션이 끝난 후 실행되어야 할 함수를 지정합니다.

코드 예제:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/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>애니메이션 시작</button>
<p>기본적으로 모든 HTML 요소는 정적 위치를 가지고 있으며 이동할 수 없습니다. 위치를 조작하려면 먼저 요소의 CSS 위치 속성을 상대적, 고정적, 또는 절대적으로 설정을 기억해야 합니다!/p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

{params} 객체의 변수의 다양한 할당 형식

{params} 객체의 변수는 다음과 같은 형식으로 할당할 수 있습니다.

absolute 값 형식

위 코드 예제는 absolute 값 형식으로 params 객체에 값을 할당하는 것을 보여줍니다.

대비치 값 형식

예를 들어, 변수 값 앞에 "+”“-” 등.

코드 예제:

<script> 
$("document").ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:'250px',
   height:'+=150px',
   width:'+=150px'
  });
 });
});
</script>

show, hide 및 toggle

params 객체의 변수 값은 위 세 가지 값 중 하나로 설정할 수 있습니다. 예를 들어, 아래 코드는 div 태그의 내용을 사라지게 하는 역할을 합니다.

$("button").click(function(){
 $("div").animate({
  height:'toggle'
 });
});

이 글을 통해 jQuery를 사용한 페이지 애니메이션 효과(예제 코드)는 저가 분담해드린 모든 내용입니다. 많은 참고가 되길 바라며, 많은 지지를 부탁드립니다. 나락 튜토리얼.

기본 튜토리얼

좋아하는 것