jQuery的动画队列及常用方法简介

1.动画队列

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})

遵循先进先出的规则,逐一执行。
嵌套回调函数容易出错,这里修改下代码

$box.hide(1000)
            .show(1000)
            .fadeOut()
            .fadeIn()
            .slideUp()
            .slideDown(function(){
                console.log('真的完毕了')
            })
image.png

2. 一些API

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

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

 $('.target').hide();

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

用于显示元素,用法和hide类似

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

事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置

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

关于停止动画的一些常用方法

.clearQueue

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

.finish

停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

.stop( [clearQueue ], [jumpToEnd ] )

停止当前正在运行的动画

接受两个参数

  • (false,false)停止当前动画并执行队列下一条
  • (true,false)停止当前动画并清除队列
  • (true, true) 移到已执行的最终位置,清除队列

预览地址:https://jumodada.github.io/resume/jQuery/antimate/basic.html

推荐阅读更多精彩内容