jQuery 动画队列

动画

• 逐渐缩放
  $().show(speed,function) 显示 time是动画的时间，可以是
  $().hide(speed,function) 隐藏time为可选项
  $().toggle(speed,function)隐藏显示切换
• 淡入淡出
  $().fadeIn(speed,function)显示
  $().fadeOut(speed,function)隐藏
  $().fadeToggle(speed,function)隐藏显示切换
• 拉上拉下
  $().sideDown(speed,function)拉下去（显示）
  $().sideUp(speed,function) 拉上来（隐藏）
  $().sideToggle(speed,function)隐藏显示切换

给一个元素添加多个动画效果的时候，就有了动画队列，队列里的动画效果会依次实现

动画的异步
html+css

button
  

jQuery

$('.btn1').on('click',function(){
  $('.box').hide(1000)
  console.log('hide')//立即执行
})

这里会立即输出hide，接着动画完成，说明动画是异步执行的，如果要在动画完成之后输出hide，则需要在动画里面添加回调函数

$('.btn1').on('click',function(){
  $('.box').hide(1000,function(){
    console.log('hide')
  })
})

hide会在动画完成后输出，如果要在前一个动画执行完成之后再执行下一个动画，可以用这种回调函数的方式，嵌入多层函数，这就是动画队列。

$('.btn1').on('click',function(){
  $('.box').hide(1000,function(){
    console.log('动画1完成')
    $('.box').show(1000,function(){
      console.log('动画2完成')
      $('.box').fadeOut(1000,function(){
        console.log('动画3完成')
        $('.box').fadeIn(1000,function(){
          console.log('动画4完成')
        })
      })
    })
  })
})

以上代码也可以这样写，动画队列遵循先进先出的原则

$('.btn1').on('click',function(){
  $('.box').hide(1000)
           .show(1000)
           .fadeOut(1000)
           .fadeIn(1000)
})

动画队列

自定义动画

指定动画形式及结果样式属性，对象中的每一个属性都表示一个可以变化的样式属性，所有指定属性必须用驼峰式，如果需要移动位置，需要将该元素的css样式position设置为relative、relative、fixed。

$('.btn1').on('click',function(){
  $('.box').animate({left:200},1000)
           .animate({top:100},500)
           .animate({left:0},1000)
           .animate({top:0},500)
})

停止动画stop([clearQueue],[jumpToEnd])
clearQueue布尔值类型，默认false，是否清除后面的动画队列
jumpToEnd布尔值类型，默认false，是否跳到动画最后

$('.btn2').on('click',function(){
  $('.box').stop(true,false)//立即停止动画
})
$('.btn3').on('click',function(){
  $('.box').stop(true,true)//清空后面的动画队列，跳转到此项动画的最后一帧
})