날카로운 jQuery 핵심 포인트 요약(3) jQuery의 이벤트와 애니메이션(2부: 애니메이션)_jquery

2. 애니메이션
1 show() 메소드와 hide() 메소드

코드 복사 코드는 다음과 같습니다

$("selector").show()
요소의 기본값을 복원하거나 display:none에서 표시 속성을 설정합니다.
$("selector").hide()
설정 요소의 표시 스타일은 없음이며 $("selector").css("display","none")

과 같습니다(참고: 매개변수를 전달한 후 .show() 및 .hide() 메소드는 애니메이션이 요소의 너비, 높이 및 투명도 속성을 변경합니다. 전달된 매개변수는 .show(600)와 같이 표시 속도를 밀리초 단위로 제어합니다. 또한 빠름, 보통, 느림을 전달할 수도 있습니다. 빠른 것은 200밀리초, 보통은 400밀리초, 느린 것은 600밀리초)
2 fadeIn() 메서드 및 fadeOut() 메서드

코드 복사 코드는 다음과 같습니다.

$("selector").fadeIn()
display:none에서 지정된 시간 내에 완전히 표시되도록 투명도를 제어합니다.
$ ("selector").fadeOut()
투명도 제어 지정된 시간 내에 표시:없음

3 SlideUp() 메서드 및 SlideDown() 메서드

코드 복사 코드는 다음과 같습니다.

$("selector").slideUp()
높이 컨트롤 요소가 지정된 시간 내에 아래에서 위로 단축되어 표시:없음
$("selector").slideDown()
디스플레이:없음에서 전체로 확장되도록 요소의 높이를 제어합니다. 지정된 시간 내의 높이

4 사용자 정의 애니메이션 방법 animate()

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

$("selector").animate(params,speed,callback);
params: 스타일 속성과 값을 포함하는 매핑(예: {property1:"value1") property2:"value2",...}
speed: 속도 매개변수, 선택사항
콜백: 애니메이션이 완료될 때 실행 매개변수(예: 콜백 함수), 선택사항

일반적인 애니메이션 예

코드 복사 코드는 다음과 같습니다.

<script> 맞춤 애니메이션 예시<br>$(function(){ <br>$("selector").click(function() { <br>$(this).animate({left:"500px"},3000); //선택기가 3초 안에 오른쪽으로 500px 이동 <br>}) <br>}) <br></script&gt ; <br><br> </div> <br><div class="codetitle"> <span>코드 복사 <a style="CURSOR: pointer" data="79900" class="copybut" id="copybut79900" onclick="doCopy('code79900')"><u></u> 코드는 다음과 같습니다. </a></span> </div><script> <div class="codebody" id="code79900">//누적 및 누적 애니메이션 예시<br>$(function() { <br>$("selector").click(function(){ <br>$(this).animate({left:" =500px"},3000); //클릭 이벤트가 연속적으로 발생하면 500px가 현재 위치에 누적 <br>}) <br>}) <br></script>
<script> //여러 애니메이션의 예<br>$(function(){ <br>$("selector").click(function(){ <br>$(this).animate({left:"500px",top: "300px",height:" =100px"},3000); //오른쪽 아래로 30도 이동하고 동시에 높이를 늘립니다.<br>}) <br>}) <br></script>
<script> 여러 애니메이션을 순차적으로 실행<br>$(function(){ <br>$("selector").click(function(){ <br>$(this).animate({left:"500px"},3000) .animate({top:"300px"},3000); //애니메이션 대기열<br>}) <br>}) <br></script>


5 애니메이션 콜백 함수
CSS() 메서드는 애니메이션 대기열에 추가되지 않으므로 즉시 실행됩니다. 애니메이션 종료 시 선택기의 CSS를 변경하려면 콜백 함수를 사용해야 합니다
예시:

코드 복사

코드는 다음과 같습니다: <script> </span>$("selector").click(function(){ </div>$(this).animate ({property1:"value1"},time).animate( {property2:"value2"},time,function(){ <div class="codebody" id="code6603">$(this).css("property3","value3"); //css () 메소드는 콜백 함수를 사용하여 애니메이션 대기열에 합류합니다<br>}) ; <br>}) <br></script>


(참고: 애니메이션 콜백 함수는 모든 jQuery에 적용됩니다. 애니메이션 효과 메서드)
6 애니메이션을 중지하고 애니메이션 상태인지 확인
$("selector").stop()

큐에 다음 애니메이션이 있으면 현재 애니메이션을 종료합니다. 다음 애니메이션은 즉시 실행됩니다. 형식은 $("selector").stop([clearQueue][,gotoEnd ])
애니메이션 전환 예:




코드 복사

코드는 다음과 같습니다.

<script> <br>$("selector").hover(function(){ <br>$(this).stop().animate(); <br>},function() { <br>$(this).stop().animate(); <br>}) <br></script>

clearQueue 매개변수가 true로 설정되면 요소가 지워집니다. 아직 실행되지 않은 다음 애니메이션 큐
예:

코드 복사 코드는 다음과 같습니다. :

<script> <br>$("selector").hover(function(){ <br>$(this).stop(true).animate().animate() //이때 커서 이동 이벤트가 트리거됩니다. 이 큐의 두 번째 애니메이션 실행을 피하기 위해 후속 애니메이션 큐를 직접 건너뜁니다. <br>}, function(){ <br>$(this).stop(true).animate ().animate() <br>}) <br></script>

gotoEnd 매개변수를 true로 설정하면 실행 중인 애니메이션이 종료 시점의 상태에 바로 도달할 수 있습니다.
is(":animated")
요소가 애니메이션 상태인지 여부를 판단하여 애니메이션 축적을 방지할 수 있습니다
예:

코드 복사 코드는 다음과 같습니다.

<script> <br>if(!$("selector").is(":animated")){ //요소가 애니메이션 상태인지 확인 <br>//현재 애니메이션이 없으면 새 애니메이션 추가 <br>} <br></script>

7 기타 애니메이션 방법
상호작용을 위한 3가지 애니메이션 방법: 전환(speed,[callback]) ; SlideToggle(speed,[callback]) fadeTo(speed,opacity,[callback])

코드 복사 코드는 다음과 같습니다.

$("selector").toggle()
표시 상태 전환 요소가 숨겨져 있으면 표시되도록 전환하고 그 반대도 가능합니다
$("selector").slideToggle( )
높이 변경을 통해 요소의 표시 여부를 전환
$("selector" ).fadeTo()
$("selector") .fadeTo(600,0.2)와 같이 점진적으로 요소의 불투명도를 지정된 값으로 조정합니다. 600밀리초에서 콘텐츠의 투명도를 20%로 조정합니다

8 애니메이션 방법 요약

코드 복사 코드는 다음과 같습니다.

toggle()은 hide() 및 show()를 대체하는 데 사용됩니다.
slideToggle()은 SlideUp() 및 SlideDown()을 대체하는 데 사용됩니다.
animate()는 모든 애니메이션 메서드를 대체할 수 있습니다