jquery中的动画效果总结以及动画队列的总结（附代码）-js教程-PHP中文网

jquery中的动画效果总结以及动画队列的总结（附代码）

不言

发布： 2018-08-15 11:12:51

原创

1724 人浏览过

本篇文章给大家带来的内容是关于jquery中的动画效果总结以及动画队列的总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

基础效果

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

用于隐藏元素，没有参数的时候等同于直接设置 display 属性

$(&#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()

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

渐变效果

.fadeIn()

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

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

登录后复制

.fadeOut()

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

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

登录后复制

.fadeTo()

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

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

登录后复制

滑动效果

.slideDown() / .slideUp()

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

$(&#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()
})

登录后复制

回调同步与异步

如以下案例

回调同步

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

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

登录后复制

异步

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

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

登录后复制

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

$(&#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;)
})

登录后复制

jQuery 动画队列

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

动画队列机制和执行顺序

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

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

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

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

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

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

自定义动画

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

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

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

$(&#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)
})

登录后复制

.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)的地方。

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

.stop(true,true)

动画序列中共有 4 个序列，当执行到动画序列2 的时候使用.stop(true,true)，由于参数 [clearQueue]是 true 因此后面的也动画序列也全部清空，不会再往下执行动画序列。由于参数 [jumpToEnd]也是 true ，因此最后会停留在动画序列2 本身应该结束的位置。