jquery를 통해 페이지 애니메이션 효과 구현(예제 코드)-JS 튜토리얼-php.cn

jquery를 통해 페이지 애니메이션 효과 구현(예제 코드)

高洛峰

풀어 주다： 2016-12-28 10:35:05

원래의

1336명이 탐색했습니다.

애니메이션 효과를 구현하는 데 사용할 수 있는 기능이 많이 있으며, 그중 애니메이션 기능은 가장 일반적인 기능 중 하나입니다. 다음은 이 기능을 사용하는 방법에 대한 간략한 소개입니다.

animate 함수의 기본 형식

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

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

그 중 {params}는 필수 항목으로, 애니메이션 효과를 실행한 후 지정된 요소에 적용할 CSS 스타일을 지정하는 객체입니다. 둘 다 선택 사항이며 speed는 애니메이션이 실행되는 속도를 지정합니다. 해당 값은 숫자 유형일 수 있습니다(예를 들어 1000은 애니메이션이 1초 이내에 매개변수로 지정된 스타일로 변경됨을 의미함). 콜백은 애니메이션이 끝난 후 실행될 함수를 지정합니다.

코드 예:

<!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:&#39;250px&#39;,
   opacity:&#39;0.5&#39;,
   height:&#39;150px&#39;,
   width:&#39;150px&#39;
  });
 });
});
</script> 
</head>
  
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
 
</body>
</html>

로그인 후 복사

{params} 객체의 변수에 대한 다중 할당 형식

{params} 객체의 변수에 대해 값을 할당할 수 있습니다. 다음과 같은 형태로 .

절대값 형식

위의 코드 예제는 params 객체를 절대값 형식으로 할당하는 것입니다

상대값 형식

예를 들어 다음과 같이 말하세요. 변수 값 앞에 "+", "-" 등을 추가합니다.

코드 예:

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

로그인 후 복사

표시, 숨기기 및 전환

params 객체의 변수 값, 위의 세 가지 값을 할당할 수도 있습니다. 다음 코드의 기능은 div 태그의 내용을 사라지게 하는 것입니다.

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

로그인 후 복사

jquery(예제 코드)를 통해 페이지의 애니메이션 효과를 구현하는 위의 글은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 웹사이트를 지원합니다.

jquery를 통해 구현된 페이지 애니메이션 효과(예제 코드)에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!