4. jQuery의 애니메이션

jQuery의 애니메이션 방법을 통해 웹 페이지에 매우 멋진 시각 효과를 쉽게 추가하여 사용자에게 새로운 체험을 제공할 수 있다.
1. show () 방법과 hide () 방법
1. show () 방법과 hide () 방법
show () 방법과 hide () 방법은 jQuery에서 가장 기본적인 애니메이션 방법입니다.HTML 문서에서 요소에 대해 hide() 방법을 호출하면 해당 요소의 display 스타일이 none으로 바뀝니다.
숨겨진 요소:

$("element").hide();  //  hide()

css 방법으로 디스플레이 속성을 설정할 수도 있습니다

$("element").css("display","none");//  css()

원소가 숨겨진 후 show () 방법으로 원소의 디스플레이 스타일을 이전 디스플레이 상태로 설정할 수 있습니다.

$("element").show();

jQuery로 애니메이션 효과를 만들려면 표준 모드에서 해야 합니다. 그렇지 않으면 애니메이션의 떨림을 일으킬 수 있습니다.
2. show () 방법과hide () 방법은 원소를 움직이게 한다
() 방법과 hide () 방법은 매개 변수가 없는 경우 css ("display", "none/Block/inline") 와 같습니다.애니메이션 없이 일치하는 요소를 즉시 숨기거나 표시하는 역할을 합니다.show () 방법을 호출할 때 원소가 천천히 나타나기를 원한다면 show () 방법에 속도 파라미터를 지정할 수 있습니다. 예를 들어 속도 키워드 'slow' 를 지정할 수 있습니다.

$("element").show("slow");

기타 키워드는 다음과 같습니다. normal fast.디스플레이 속도에 대한 숫자를 지정할 수도 있습니다.

$("element").hide(600);

이 세 속성의 값이 0이 될 때까지 내용의 높이, 너비, 불투명도를 동시에 줄일 수 있으며, 마지막으로 이 요소의 css 규칙을 디스플레이: none으로 설정합니다.마찬가지로 show(600) 방법은 위에서 아래로 내용의 높이를 높이고 왼쪽에서 오른쪽으로 내용의 폭을 확대하며 내용의 불투명도를 증가시켜 원소가 모두 나타날 때까지 한다.
2. fadeIn () 방법과 fadeOut () 방법
show () 방법과 다르게fadeIn () 방법과fadeOut () 방법은 원소의 불투명도만 바꿉니다.fadeOut () 방법은 원소가 완전히 사라질 때까지 지정한 시간 동안 원소의 불투명도를 낮춘다. (display: none)fadeIn() 방법은 반대입니다.
3. slideUp () 방법과 slidDown () 방법
slideUp () 방법과 slideDown () 방법은 원소의 높낮이만 바꿉니다. slideDown () 방법을 호출할 때 이 원소는 위에서 아래로 뻗어 표시됩니다.slideUp () 방법은 반대로 원소가 아래에서 위로 숨겨집니다.
4. 사용자 정의 애니메이션 애니메이션 () 방법
앞에서 이미 세 가지 유형의 애니메이션을 설명하였다.여기서 show () 방법과 hide () 방법은 요소의 여러 스타일 속성, 높이, 너비, 투명도를 동시에 수정합니다.fadeOut(), fadeIn() 메서드는 요소의 불투명도만 수정합니다.slideDown() 메서드와 slideUp() 메서드는 요소의 높이만 변경합니다.많은 경우 이런 방법들이 사용자의 각종 수요를 만족시키지 못하면 애니메이션에 대해 더 많은 통제를 필요로 하고 고급 사용자 정의 애니메이션을 채택하여 이런 문제를 해결해야 한다.jQuety에서 애니메이션을 사용자 정의하는 데 animate () 방법을 사용할 수 있습니다.animate(params,speed,callback).
첫 번째 매개 변수:params는 스타일 속성과 값을 포함하는 매핑입니다. 예를 들어 {property1: "value1",property2: "value2",......}
두 번째 파라미터:speed 속도 파라미터는 선택할 수 있습니다.
콜백: 애니메이션이 끝날 때 실행되는 함수입니다. 선택할 수 있습니다.
1. 간단한 애니메이션 사용자 정의
div 영역을 클릭하여 div를 왼쪽으로 이동합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<style type="text/css">
 #panel{position:relative; width:100px; height:100px; border:1px solid #0050D0; background:#96E555; cursor:pointer;}
</style>
<script type="text/javascript" >
 $(function(){
  $("#panel").click(function(){
   $(this).animate({left:"500px"},3000);
   });
  });
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

2. 애니메이션 누적
{left: "500px"} 의 500px 앞에 "+ ="또는 "- ="기호를 붙이면 현재 위치에서 누적되거나 누적됩니다.

 $(function(){
  $("#panel").click(function(){
   $("#panel").animate({left:"+=500px"},3000);
   });
  });

3. 다중 애니메이션
(1) 여러 애니메이션 동시에 실행
예를 들어 원소가 오른쪽으로 미끄러지는 동시에 원소의 높이를 확대한다.

$(function(){
  $("#panel").click(function(){
   $(this).animate({left:"500px",height:"200px"},3000);
   });
  });

(2) 순서대로 여러 애니메이션 실행
상례에서 두 개의 애니메이션(left: "500px"와height: "200px")은 동시에 발생한다. 예를 들어

요소를 오른쪽으로 미끄러지게 하고 높이를 높이려면 코드를 뜯어서 순서대로 쓰면 된다.

$(function(){
  $("#panel").click(function(){
   $(this).animate({left:"500px"},3000);
   $(this).animate({height:"200px"},3000);
   });
  });

animate () 방법은 모두 같은 jQuery 대상을 조작하기 때문에 체인식으로 쓸 수도 있습니다.
4. 종합 애니메이션
예를 들어

요소를 누르면 오른쪽으로 이동하는 동시에 높이를 높이고 불투명도를 50%에서 100%로 바꾼 다음 위에서 아래로 이동하는 동시에 넓이를 넓히고 효과를 완성한 후에 담백하게 숨긴다.

 $(function(){
   $("#panel").click(function(){
    $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px"},3000).fadeOut("slow");
    });
  });

5. 애니메이션 콜백 함수
전례의fadeOut("slow")을 css("border", "5px solid blue")로 변경하면 애니메이션을 처음 실행할 때 css() 방법이 실행되는 것이 실제 효과입니다.이 문제가 발생한 이유는 css () 방법이 애니메이션 대기열에 들어가지 않고 바로 실행되기 때문입니다.비애니메이션 방법으로 줄을 서는 데 콜백 함수를 사용할 수 있습니다.css () 방법을 마지막 애니메이션의 리셋 함수에 쓰면 됩니다.
콜백 함수 콜백은 슬라이드 다운 () 방법과 같은 모든 jQuery 애니메이션의 효과 방법에 적용됩니다.
6. 애니메이션 중지 및 애니메이션 상태 판단
(1) 애니메이션을 중지합니다.
일치하는 요소가 진행 중인 애니메이션을 중지해야 할 때가 많습니다. 애니메이션을 중지하려면 stop () 방법을 사용해야 합니다.stop([clearQueue],[gotoEnd])
매개 변수clearQueue, gotoEnd는 boolean 값으로 선택할 수 있는 매개 변수입니다.clearQueue는 실행되지 않은 애니메이션 목록을 비워야 하는지, gotoEnd는 실행 중인 애니메이션을 끝 상태로 직접 전환할지 여부를 나타냅니다.stop () 방법을 직접 사용하면 현재 진행 중인 애니메이션을 즉시 멈추고 다음에 계속 진행할 애니메이션이 있으면 현재 상태로 다음 애니메이션을 시작합니다.stop () 방법은 현재 진행 중인 애니메이션을 끝내고 대기열의 다음 애니메이션을 즉시 실행합니다.
(2) 요소가 애니메이션 상태인지 판단
애니메이션 () 방법을 사용할 때 애니메이션이 축적되어 사용자의 행동과 일치하지 않는 것을 피해야 한다.사용자가 특정 요소에서 애니메이션 () 애니메이션을 빠르게 실행할 때 애니메이션 축적이 나타납니다.해결 방법은 요소가 애니메이션 상태에 있는지 여부입니다. 요소가 애니메이션 상태에 있지 않으면 요소에 새 애니메이션을 추가하지 않고 추가하지 않습니다.

if(!$(element).is(":animated")){}

7. 기타 애니메이션 방법
위에서 언급한 애니메이션 방법을 제외하고 jQuery에는 상호작용을 위한 애니메이션 방법이 3개나 있다.
toogle(speed,callback)
slideToggle(speed,callback)
fadeTo(speed,opacity,callback)
(1), toggle() 방법
toggle () 방법은 원소의 보이는 상태를 전환할 수 있습니다.
(2), slideToggle() 방법
slideToggle() 메서드는 높이 변경을 통해 일치하는 요소의 가시성을 전환합니다.이 애니메이션 효과는 요소의 높이만 조정합니다
(3), fadeTo() 방법
fadeTo () 방법은 원소의 불투명도를 지정한 값으로 점진적으로 조정할 수 있습니다. 이 애니메이션은 원소의 불투명도만 조정합니다. 즉 일치하는 원소의 높이와 너비는 변하지 않습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

4. jQuery의 애니메이션

좋은 웹페이지 즐겨찾기