jQuery에서 animate의 여러 사용법과 주의사항-JS 튜토리얼-php.cn

jQuery에서 animate의 여러 사용법과 주의사항

高洛峰

풀어 주다： 2016-12-28 09:31:44

원래의

1387명이 탐색했습니다.

1. 애니메이션 구문 구조

animate(params,speed,callback)

로그인 후 복사

params: {key1:value1,key2:value2}

와 같은 스타일 속성과 값을 포함하는 매핑 speed: 속도 매개변수 [선택]

콜백: 애니메이션이 완료되면 실행되는 함수 [선택]

2. 간단한 애니메이션 커스터마이징

하나 사용하자 div를 클릭하여 페이지에서 가로로 떠다니는 효과를 얻는 방법을 보여주는 간단한 예입니다.

<style>
 #cube{
  position:relative;/* 不加这句元素不能动 */
  width:30px;
  height:30px;
  background:red;
  cursor:pointer;
 }
</style>
<body>
 <div>
  <div id="cube"></div>
 </div>
 <script>
  $(function(){
   $("#cube").click(function(){
    $(this).animate({left:"100px"},2000)
   })
  })
 </script>

로그인 후 복사

요소를 이동하려면 left 속성을 변경하세요. 요소의 위쪽, 오른쪽, 아래쪽, 왼쪽 속성 값에 영향을 주기 위해서는 요소의 위치를 선언해야 합니다.

jQuery에서 animate의 여러 사용법과 주의사항

3. 누적 및 누적 애니메이션

이전 코드에서는 {left: "100px"} 속성을 매개변수로 설정했고, {왼쪽:"+=25px"}로 다시 쓰면 효과는 다음과 같습니다

jQuery에서 animate의 여러 사용법과 주의사항

4. 다중 애니메이션

에서 다중 애니메이션 실행 동시에

위의 예는 매우 간단한 애니메이션입니다. 예를 들어 요소가 오른쪽으로 슬라이드되는 동안 여러 애니메이션을 동시에 수행하려는 경우 요소의 높이가 확대됩니다.

코드는 다음과 같습니다.

$(this).animate({left:"+=25px",height:"+=20px"},1000)

로그인 후 복사

jQuery에서 animate의 여러 사용법과 주의사항

5. 🎜>

위의 예에서 오른쪽으로 슬라이드한 후 높이가 증가하는 현상이 동시에 발생합니다. 블록이 먼저 오른쪽으로 슬라이드된 후 높이가 증가하도록 하려면 코드를 분할하면 됩니다.

다음과 같습니다.

$(this).animate({left:"+=25px"},500)
  .animate({height:"+=20px"},500)

로그인 후 복사

이와 같은 애니메이션 효과의 실행에는 "애니메이션 대기열"이라는 시퀀스가 있습니다.

jQuery에서 animate의 여러 사용법과 주의사항

6. 종합예

사각형을 클릭하면 높이가 증가하면서 오른쪽으로 이동하고 불투명도가 50%에서 100%로 증가합니다. 위아래로 움직이고, 넓어지고, 완료되면 페이드 아웃됩니다.

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .fadeOut(&#39;slow&#39;)
   })

로그인 후 복사

동일한 요소에 여러 효과를 적용하는 경우 이러한 효과를 체인으로 대기열에 넣을 수 있습니다.

jQuery에서 animate의 여러 사용법과 주의사항

7. 애니메이션 콜백 기능

위 예시에서 마지막으로 CSS 스타일(배경:파란색)을 바꾸고 싶다면 step에서 Fade out이 아닌 평소대로 처리하면 해당 코드는 다음과 같습니다.

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .css("border","5px solid blue")//改动这行
   })

로그인 후 복사

단, css() 메소드가 먼저 호출됩니다. 시간의.

jQuery에서 animate의 여러 사용법과 주의사항

이 문제가 발생하는 이유는 CSS() 메서드가 애니메이션 대기열에 추가되지 않고 즉시 실행되기 때문입니다. 콜백 함수를 사용하여 애니메이션이 적용되지 않은 메서드에 대한 대기열을 구현할 수 있습니다.

올바른 관련 코드는 다음과 같습니다.

$("#cube").click(function(){
 $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
 .animate({top:"40px",width:"100px"},500,function(){
  $(this).css("border","5px solid blue")
 })
})

로그인 후 복사

jQuery에서 animate의 여러 사용법과 주의사항