六、jQuery动画

1、显示和隐藏：hide、show、toggle

$(function() {
  $('[type=button]').click(function(e) {
    var box = $('.box')
    box
      .hide() // 隐藏box
      .show() // 显示box
      .hide('slow') // 缓慢隐藏
      .show('slow') // 缓慢显示
      .hide('fast') // 快速隐藏
      .show('fast') // 快速显示
      .hide(2000) // 隐藏动画持续2000毫秒
      .show(2000) // 显示动画持续2000毫秒
      .hide(1000, function() {
        // 动画执行完毕后调用回调函数
        console.log('hide动画执行完毕')
      })
      .show(1000, function() {
        console.log('show动画执行完毕')
      })
      .toggle() // 如果本来是隐藏的则显示，如果本来是显示的则隐藏
      .toggle(1000)
      .toggle(1000, function() {
        console.log('toggle动画执行完毕')
      })
  })
})

2、淡入淡出fadeIn、fadeOut、fadeToggle

$(function() {
  $('[type=button]').click(function(e) {
    var box = $('.box')
    box
      .fadeOut() // 淡出
      .fadeIn() // 淡入
      .fadeToggle() // 如果当前状态是淡出，则执行淡入动画，否则相反
      .fadeIn('slow') // 缓慢淡入
      .fadeOut('fast') // 缓慢淡出
      .fadeToggle(2000)
      .fadeTo(1000, 0.5) // 1000毫秒内渐变到透明度为0.5
      .fadeTo(1000, 1, function() {
        // 1000毫秒内渐变到透明度为1，动画完成后执行回调函数
        console.log('fadeTo渐变动画完成')
      })
  })
})

3、滑动slideDown、slideUp、slideToggle

$(function() {
  $('[type=button]').click(function(e) {
    var box = $('.box')
    box
      .slideUp()
      .slideDown()
      .slideToggle()
      .slideToggle('slow', function() {
        console.log('slideToggle slow 动画完成')
      })
      .slideToggle('fast')
      .slideToggle(1000)
  })
})

4、自定义动画animate

$(function() {
  $('[type=button]').click(function(e) {
    var box = $('.box')
    box
      .animate({
        width: '100px',
        height: '200px',
        opacity: '0.5',
        marginLeft: '200px'
      })
      .animate(
        {
          width: '200px',
          height: '100px',
          opacity: '1',
          marginLeft: 0
        },
        'fast'
      )
      .animate(
        {
          width: '-=50px',
          height: '+=100px'
        },
        'slow',
        function() {
          console.log('动画执行完毕')
        }
      )
      .animate(
        {
          paddingLeft: '+=100px'
        },
        2000
      )
  })
})

5、停止动画stop

// 此处引用第4小部分的代码，以...表示
// .....

//此处是在第4部分基础上新增的代码
$('#stop').click(function() {
  //$('.box').stop() // 停止当前正在执行的当前动画，其后的动画会继续执行
  //$('.box').stop(true) // 第一个参数，可选；表示是否清除动画队列，true表示清除整个动画队列；默认false
  $('.box').stop(false, true) // 第二个参数，可选；表示是否立即完成当前动画，默认是false
})