一篇文章快速了解jQuery中的动画

标准动画

1. show() 显示
   语法: show(时间, 运动曲线, 运动结束的函数)
2. hide() 隐藏
   语法: hide(时间, 运动曲线, 运动结束的函数)
3. toggle() 切换(如果是隐藏就显示, 如果是显示就隐藏)
   语法: toggle(时间, 运动曲线, 运动结束的函数)

上面三个方法参数都是选填

//布局 三个 button按钮 一个div
//点击这个按钮让 div 显示
$('.show').click(() => {
   $('div').show(2000, 'linear', function () {
      console.log('显示结束')
  })
})
//点击这个函数让 div 隐藏
$('.hide').click(() => {
   $('div').hide(2000, 'linear', function () {
      console.log('隐藏结束')
   })
})
//点击这个按钮让 div 切换显示和隐藏
$('.toggle').click(() => {
   $('div').toggle(2000, 'linear', function () {
      console.log('切换结束')
   })
})

折叠动画

1. lideDown() 下滑显示
   语法: slideDown(时间, 运动曲线, 运动结束的函数)
2. slideUp() 上滑隐藏
   语法: slideUp(时间, 运动曲线, 运动结束的函数)
3. slideToggle() 切换滑动显示和隐藏
   语法: slideToggle(时间, 运动曲线, 运动结束的函数)

上面三个方法的参数都可以不写

//布局 三个 button按钮 一个div
//点击这个按钮让 div 显示
$('.show').click(() => {
  $('div').slideDown(2000, 'linear', function () {
       console.log('下滑结束')
  })
})
//点击这个函数让 div 隐藏
$('.hide').click(() => {
    $('div').slideUp(2000, 'linear', () => console.log('上滑结束'))
})
//点击这个按钮让 div 切换显示和隐藏
$('.toggle').click(() => {
   $('div').slideToggle(2000, 'linear', function () {
        console.log('切换结束')
  })
})

渐隐渐显动画

1. fadeIn() 渐渐的显示
   语法: fadeIn(时间, 运动曲线, 运动结束的函数)
2. fadeOut() 渐渐的消失
   语法: fadeOut(时间, 运动曲线, 运动结束的函数)
3. fadeToggle() 渐渐的切换显示和消失
   语法: fadeToggle(时间, 运动曲线, 运动结束的函数)
   上面三个方法都有参数默认值
4. fadeTo() 去到一个你指定的透明度
   语法: fadeTo(时间, 你指定的透明度, 运动曲线, 运动结束的函数)

//布局就是四个  button  一个div 
//点击这个按钮让 div 显示
$('.show').click(() => {
  $('div').fadeIn(2000, 'linear', () => console.log('显示'))
})
//点击这个按钮让 div 隐藏
$('.hide').click(() => {
  $('div').fadeOut(2000, 'linear', () => console.log('隐藏'))
})
//点击这个按钮让 div 切换显示和隐藏
$('.toggle').click(() => {
  $('div').fadeToggle(2000, 'linear', () => console.log('切换'))
})
//点击这个按钮的时候 让 div 去到 0.6 的透明度
$('.to').click(() => {
  $('div').fadeTo(2000, 0.6, () => console.log('已经到达指定透明度'))
})

综合动画
animate()
语法: animate({}, 时间, 运动曲线, 运动结束的函数)

• 基本上大部分的 css 样式都可以动画
• transform 不行, 颜色不行
• {} 里面就写你要运动的 css 属性

//布局 一个button 按钮 一个div
$('button').click(() => {
      $('div').animate({
        width: 300,
        height: 300,
        left: 30,
        top: 50,
        borderRadius: '50%',
        opacity: 0.5
      }, 2000, 'linear', () => console.log('运动结束'))
    })

最后，附：上述综合动画代码效果图
开始。
结束。
好了，希望总结的东西能对大家有所帮助。