jq动画

时间：2019-10-05 00:57:23 阅读：173 评论：0 收藏：0 [点我收藏+]

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动画

标签：清除 asi func class linear obj 效果隐藏切换

原文地址：https://www.cnblogs.com/zhaodz/p/11623571.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行