1.show动画

（1）show（speed，callback） 展示

 $("button:eq(0)").click(function(){
  $("div").show(10000,fn)
  })
  function fn(){
  console.log('动画结束了')
  }

   （2）hide（speed，callback） 隐藏

 $("button:eq(0)").click(function(){
  $("div").hide(10000,fn)
   })
   function fn(){
      console.log('动画结束了')
    }

（3）toggle（speed，callback） 切换

$("button:eq(0)").click(function(){
  $("div").toggle(10000,fn)
   })
   function fn(){
      console.log('动画结束了')
    }

2.slide  滑入滑出

（1）slideDown 

 $("button:eq(0)").click(function(){
  $("div").slideDown(10000,fn)
   })
   function fn(){
      console.log('动画结束了')
    }

（2）slideUp  

 $("button:eq(0)").click(function(){
  $("div").slideUp(10000,fn)
   })
   function fn(){
      console.log('动画结束了')
    }

（3）slideToggle

 $("button:eq(0)").click(function(){
  $("div").slideToggle(10000,fn)
   })
   function fn(){
      console.log('动画结束了')
    }

3.fade  淡入淡出

（1）fadeIn

 $("button:eq(0)").click(function(){
  $("div").fadeIn(10000,fn)
   })
   function fn(){
      console.log('动画结束了')
    }

（2）fadeOut

  $("button:eq(0)").click(function(){
  $("div").fadeOut(10000,fn)
   })
   function fn(){
      console.log('动画结束了')
    }

（3）fadeToggle

 $("button:eq(0)").click(function(){
  $("div").fadeToggle(10000,fn)
   })
   function fn(){
      console.log('动画结束了')
    }

4.自定义动画   jq对象.animate(obj,speed,easing,callback)

 $(function(){
 $("div:eq(0)").animate({
   left:500,
   borderRadius: 100 ,
 },10000,fn)

 $("div:eq(1)").animate({
   left:500,
   borderRadius: 100 ,
 },10000,"linear",fn)

   function fn(){
     console.log('动画结束了')
   }
  })

5.动画队列

 jq对象.animate(obj,speed,easing,callback)

.animate(obj,speed,easing,callback)

.animate(obj,speed,easing,callback)

 .animate({
   borderRadius:100
 },3000,fn)
 .animate({
  left:300
 },3000,fn)
 
   function fn(){
     console.log('动画')
   }
  })

6.stop 

（1）stop（）停止当前正在执行的动画，如果元素的动画队列里有后续动画，就执行后续动画了

 $("button:eq(0)").click(function(){
   $("div")
  .slideDown(2000,"linear")
  .slideUp(2000,"linear")
 })
 $("button:eq(1)").click(function(){
   $("div")
  .stop()
 })

（2）stop（true）  清除动画队列  true为清除  false为默认

 $("button:eq(0)").click(function(){
   $("div")
  .slideDown(2000,"linear")
  .slideUp(2000,"linear")
 })
 $("button:eq(1)").click(function(){
   $("div")
  .stop(true)
 })

（3）stop（false，true） 跳转到当前动画的最后效果

$("button:eq(0)").click(function(){
   $("div")
  .slideDown(2000,"linear")
  .slideUp(2000,"linear")
 })
 $("button:eq(1)").click(function(){
   $("div")
  .stop(false,true)
 })