jq动画

Posted 2022-12-23 zhaodz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq动画相关的知识，希望对你有一定的参考价值。

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(
   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)
 )

以上是关于jq动画的主要内容，如果未能解决你的问题，请参考以下文章