Jquery의 애니메이션 효과 및 애니메이션 대기열 요약(코드 포함)-JS 튜토리얼-php.cn

이 글은 jquery의 애니메이션 효과와 애니메이션 큐에 대한 요약을 제공합니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

기본 효과

.hide([duration ] [,easing ] [,complete ])

은 매개변수 없이 요소를 숨기는 데 사용됩니다. 표시 속성을 직접 설정하는 방법

$(&#39;.target&#39;).hide()//等同于
$(&#39;.target&#39;).css(&#39;display&#39;, &#39;none&#39;)

로그인 후 복사

.show()

은 요소를 표시하는 데 사용되며 사용법은 hide#🎜🎜와 유사합니다. #

$(&#39;#btn-box1&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).show(&#39;normal&#39;)
})

로그인 후 복사

#🎜 🎜#.toggle()hide类似

$(&#39;#btn-box3&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).fadeIn()
})

로그인 후 복사

.toggle()

用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

渐变效果

.fadeIn()

以淡入的方式显示匹配元素

$(&#39;#btn-box4&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).fadeOut()
})

로그인 후 복사

.fadeOut()

以淡出的方式显示匹配元素

$(&#39;#book&#39;).fadeTo(&#39;slow&#39;, 0.5, function() {  // Animation complete.
});

로그인 후 복사

.fadeTo()

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

$(&#39;#btn-box5&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).slideDown()
})

$(&#39;#btn-box6&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).slideUp()
})

로그인 후 복사

滑动效果

.slideDown() / .slideUp()

用滑动动画显示一个匹配元素

$(&#39;#btn-box1&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).hide(&#39;normal&#39;, funciton(){        console.log(&#39;hide&#39;)
  })
})

로그인 후 복사

回调同步与异步

如以下案例

回调同步

即在整个动画结束之后，出现'hide'，即为同步

$(&#39;#btn-box1&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).hide(&#39;normal&#39;)   console.log(&#39;hide&#39;)
})

로그인 후 복사

异步

即只要事件触发瞬间（即按下btn），就出现'hide'，即为异步

$(&#39;#action1&#39;).on(&#39;click&#39;,function(){  var $box = $(&#39;.box&#39;)  //回调地狱写法
  $box.hide(1000, function(){
    $box.show(1000, function(){
      $box.fadeOut(&#39;slow&#39;, function(){
        $box.fadeIn(&#39;slow&#39;, function(){
          $box.slideUp(function(){
            $box.slideDown(function(){              console.log(&#39;动画执行完毕&#39;)
              $(&#39;#wrap1&#39;).text(&#39;动画执行完毕&#39;)
            })
          })
        })
      })
    })
  })
})

$(&#39;#action2&#39;).on(&#39;click&#39;,function(){  var $box = $(&#39;.box&#39;)  //使用jQuery动画队列写法
  $box.hide(1000)
      .show(1000)
      .fadeOut(&#39;slow&#39;)
      .fadeIn(&#39;slow&#39;)
      .slideUp()
      .slideDown(function(){        console.log(&#39;真的执行完毕了&#39;)
        $(&#39;#wrap2&#39;).text(&#39;真的执行完毕了&#39;)  //最后执行同步回调
      })    console.log(&#39;动画完毕了吗？&#39;)  //动画才刚开始，在动画队列创建的时候，就输出这句话，异步
    $(&#39;#wrap2&#39;).text(&#39;动画完毕了吗？&#39;)
})

로그인 후 복사

具体参考 demo 案例 1 中的案例

$(&#39;#btn4&#39;).click(function(){
  $(&#39;.box&#39;).animate({    left: &#39;150px&#39;
  },1000)
  .animate({    left: &#39;150px&#39;,    top: &#39;150px&#39;
  },1000)
  .animate({    left: &#39;0&#39;,    top: &#39;150px&#39;
  },1000)
  .animate({    left: &#39;0&#39;,    top: &#39;0&#39;
  },1000)
})

로그인 후 복사

jQuery 动画队列

动画队列可以说是动画执行的一个顺序机制，当我们对一个对象添加多次动画效果时后，添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。

动画队列机制和执行顺序

对于一组元素上的动画效果，有如下两种情况：

当在一个animate()方法中应用多个属性时，动画是同时发生的。
当以链式的写法应用动画方法时，动画是按照顺序发生的。

对于多组元素上的动画效果，有如下情况：

默认情况下，动画都是同时发生的。
当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

即参考之前的回调同步、异步。

以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

自定义动画

当基础效果、渐变效果、滑动效果动画不能满足需求的时候，jQuery 提供了自定义动画行为的方法

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一个 CSS属性和值的对象，动画将根据这组对象移动。

rrreee

.clearQueue()

清除动画队列中未执行的动画

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画
里面的参数

clearQueue：即是.clearQueue()方法，决定是否清楚动画队列中未执行的动画
jumpToEnd：即是决定是否展示当前一帧动画是否执行到最后

这两个参数默认都为false
即.stop()等同于.stop(false,false)

.stop(false,false)

动画序列中共有 4 个序列，当执行到动画序列2 的时候使用.stop()，序列2 立即停止，并执行动画序列3 ，执行完之后，执行动画序列4。

进入 demo 点击 auto 之后，再点击 .stop() 即可查看效果

.stop(true,false)

动画序列中共有 4 个序列，当执行到动画序列2 的时候使用.stop(true,false)，序列2 立即停止，由于参数 [clearQueue]是 true 因此后面的也动画序列也全部清空，不会再往下执行动画序列。因此动画会停留在动画序列2 .stop(true,false)

은 toggleClass와 유사하게 요소 숨기기 및 표시를 전환하는 데 사용되며 사용법은 와 동일합니다. 표시, 숨기기비슷함
#🎜🎜##🎜🎜#그라디언트 효과#🎜🎜##🎜🎜#.fadeIn()#🎜🎜##🎜🎜#표시 페이드인 방식으로 일치하는 요소#🎜🎜#rrreee #🎜🎜#.fadeOut()#🎜🎜##🎜🎜#일치하는 요소를 페이드인 방식으로 표시#🎜🎜#rrreee#🎜🎜#.fadeTo()# 🎜🎜##🎜🎜#일치하는 요소의 투명도 조정, 요소의 불투명도를 일치시켜 효과에 애니메이션을 적용하는 방법 일치하는 요소#🎜🎜#rrreee#🎜🎜#콜백 동기화 및 비동기#🎜🎜##🎜🎜# 다음과 같은 경우처럼#🎜🎜##🎜🎜#Callback sync#🎜🎜##🎜🎜#즉, 애니메이션 전체가 끝나면 그 이후에는 'hide'가 나타나며 이는 동기적입니다# 🎜🎜#rrreee#🎜🎜#asynchronous#🎜🎜##🎜🎜#즉, 이벤트가 트리거되자마자(즉, btn을 누름) 비동기인 'hide'# 🎜🎜#rrreee#🎜🎜#자세한 내용은 데모 사례 1의 사례를 참고하세요#🎜🎜#rrreee

#🎜🎜##🎜🎜#jQuery 애니메이션 대기열#🎜🎜##🎜🎜 #애니메이션 대기열은 순차적이라고 할 수 있습니다 애니메이션 실행 메커니즘 개체에 여러 애니메이션 효과를 추가하면 추가된 작업이 애니메이션 대기열에 추가되고 이전 애니메이션이 완료될 때까지 실행이 시작되지 않습니다. #🎜🎜#

#🎜🎜##🎜🎜#애니메이션 대기열 메커니즘 및 실행 순서#🎜🎜#

#🎜🎜#요소 그룹에 대한 애니메이션 효과의 경우 다음이 있습니다. 다음 두 가지 사례: #🎜🎜#

#🎜🎜# animate()에 적용되는 경우 메서드 여러 속성의 경우 애니메이션이 동시에 발생합니다. #🎜🎜#
#🎜🎜#체인 라이팅에 애니메이션 방식을 적용하면 애니메이션이 순차적으로 발생합니다. #🎜🎜#

#🎜🎜#여러 요소 그룹에 대한 애니메이션 효과의 경우 다음 상황이 발생합니다: #🎜🎜#

#🎜🎜#기본적으로 애니메이션은 모두 동시에 발생합니다. #🎜🎜#
#🎜🎜#콜백 형태로 애니메이션 방식을 적용하면 콜백 순서대로 애니메이션이 발생합니다. #🎜🎜#

#🎜🎜# 이전 콜백 동기화 및 비동기성을 참조하세요. #🎜🎜##🎜🎜#위는 전체 애니메이션을 스케줄링하는 과정인데 실제로 대기열의 비동기 유휴 상태를 활용한 후 동기 코드를 실행하는 방식이므로 처리에 리소스 낭비가 없습니다. 그리고 정확도가 가장 높습니다.
#🎜🎜##🎜🎜#사용자 정의 애니메이션#🎜🎜##🎜🎜#기본 효과, 그라데이션 효과 및 슬라이딩 효과 애니메이션이 요구 사항을 충족할 수 없는 경우 jQuery는 애니메이션 동작을 사용자 정의하는 방법을 제공합니다#🎜 🎜# #🎜🎜#.animate( 속성 [, 기간 ] [, 완화 ] [, 완료 ] )#🎜🎜##🎜🎜#속성은 CSS 속성 및 값의 개체입니다. 이 개체 그룹을 기반으로 합니다. #🎜🎜#rrreee#🎜🎜#.clearQueue()#🎜🎜##🎜🎜#애니메이션 대기열에서 실행되지 않은 애니메이션 지우기#🎜🎜##🎜🎜#.stop( [clearQueue ] [, jumpToEnd ] )#🎜 🎜 ##🎜🎜#현재 실행 중인 애니메이션 중지
#🎜🎜#

#🎜🎜#clearQueue 내부 매개변수: 이것이 입니다. () 메소드는 애니메이션 큐에서 실행되지 않은 애니메이션을 지울지 여부를 결정합니다#🎜🎜#
#🎜🎜#jumpToEnd: 애니메이션의 현재 프레임을 표시할지 여부와 실행 여부를 결정합니다. 끝까지# 🎜🎜#

#🎜🎜#두 매개변수는 모두 기본적으로 false입니다
즉, .stop()은 .stop(false,false)#🎜🎜#과 같습니다.

.stop (false,false)

#🎜🎜#애니메이션 시퀀스에는 4개의 시퀀스가 있습니다. 애니메이션 시퀀스 2를 실행할 때, 시퀀스 2를 사용하면 중지됩니다. 즉시 애니메이션을 실행합니다. 시퀀스 3이 실행된 후 애니메이션 시퀀스 4가 실행됩니다. #🎜🎜#

#🎜🎜##🎜🎜#Enter 데모 auto를 클릭한 후 를 클릭하세요. stop()을 사용하여 효과를 확인하세요#🎜🎜#

.stop(true,false)

#🎜🎜#애니메이션 시퀀스에는 4개의 시퀀스가 있습니다. 애니메이션 시퀀스 2를 실행하는 경우 .stop(true,false)를 사용하세요. 시퀀스 2는 [clearQueue] 매개변수가 true이므로 즉시 중지됩니다. 따라서 모든 후속 애니메이션 시퀀스도 지워지고 더 이상 애니메이션 시퀀스가 실행되지 않습니다. 따라서 애니메이션은 애니메이션 시퀀스 2 .stop(true,false)에 유지됩니다. #🎜🎜#

demo를 입력하고 자동을 클릭한 다음 .stop(true,false)을 클릭하면 효과를 볼 수 있습니다

.stop(true,true)

애니메이션 시퀀스에는 4개의 시퀀스가 있습니다. 실행됩니다. 시퀀스 2에서 .stop(true,true)를 사용하세요. [clearQueue] 매개변수가 true이므로 모든 후속 애니메이션 시퀀스도 삭제하면 애니메이션 시퀀스가 더 이상 실행되지 않습니다. [jumpToEnd] 매개변수도 true이므로 애니메이션 시퀀스 2 자체가 끝나야 하는 위치에서 끝납니다. .stop(true,true)，由于参数 [clearQueue]是 true 因此后面的也动画序列也全部清空，不会再往下执行动画序列。由于参数 [jumpToEnd]也是 true ，因此最后会停留在动画序列2 本身应该结束的位置。