js进阶 13-6 jquery动画效果相关常用函数有哪些

一、总结

一句话总结：animate()，stop()，finish()，delat()四个。

1、stop()方法的基本用法是什么（stop()当然也可以停止所有的）？

终止当前动画，但是同元素后面的动画会接着执行，比如在队列动画中，终止的话只终止了当前的动画。

30   $('#btn2').click(function(){

31     //$('#div1').stop()

32     //$('#div1').stop(true)

33     $('#div1').stop(true,true)

34   })

2、stop()方法和finish()方法的区别是什么？

finish():停止所有动画，跳转到动画的最终效果那

finish()方法和stop(true,true)很相似，stop(true,true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。

30   $('#btn2').click(function(){

31     //$('#div1').stop()

32     //$('#div1').stop(true)

33     $('#div1').stop(true,true)

34   })

35   $('#btn3').click(function(){

36     $('#div1').finish()

37   })

3、jquery动画中的延迟函数是哪个？

delay()

38   $('#btn4').click(function(){

39     $('#div1').animate({left:'500px'},1000)

40               .animate({top:'500px'},1000).delay(1000)

41               .animate({left:'10px'},1000)

42               .animate({top:'100px'},1000)

43   })

二、jquery动画效果相关常用函数有哪些

1、自定义动画

jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现，原理跟CSS3动画原理是一样的。

  • animate()方法执行CSS属性集的自定义动画。

    语法：animate(params,[speed],[easing],[fn])

    参数：params:一组包含作为动画属性和终值的样式属性和及其值的

    集合注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left

  • stop()方法停止当前正在运行的动画。

    语法：$(selector),stop(stopA11,goToEnd)

    参数：stopA11 可选。规定是否停止被选元素的所有加入队列的动画。

    goToEnd可选。规定是否允许完成当前的动画。该参数只能在设置了stopA11参数时使用。

  • finish()停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

    finish()方法和stop(true,true)很相似，stop(true,true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。

  • delat()将队列中下一个动画延迟指定的时间后执行。
  • jQuery.fx.off关闭页面上所有的动画。
  • jQuery.fx.interval设置动画的显示帧速。默认值为13
 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

   <meta charset="UTF-8">

   <title>演示文档</title>

   <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

   <style type="text/css">

     input{width: 100px;height: 30px;}

     #div1{width: 100PX;height: 100PX;background: red;position: absolute;left: 10px;top: 100px}

   </style>

 </head>

 <body>

   <h3>jQuery动画效果</h3>

   <input id="btn1" type="button" value="animate">

   <input id="btn2" type="button" value="stop">

   <input id="btn3" type="button" value="finish">

   <input id="btn4" type="button" value="delay">

   <input id="btn5" type="button" value=":animated"><br>

   <div id="div1">jQuery动画效果</div>

 <script>

 //jQuery.fx.off()

     $('#btn1').click(function(){

     $('#div1').animate({left:'500px'},1000)

               .animate({top:'500px'},1000)

               .animate({left:'10px'},1000)

               .animate({top:'100px'},1000)

   })

   $('#btn2').click(function(){

     //$('#div1').stop()

     //$('#div1').stop(true)

     $('#div1').stop(true,true)

   })

   $('#btn3').click(function(){

     $('#div1').finish()

   })

   $('#btn4').click(function(){

     $('#div1').animate({left:'500px'},1000)

               .animate({top:'500px'},1000).delay(1000)

               .animate({left:'10px'},1000)

               .animate({top:'100px'},1000)

   })

   $('#btn5').click(function(){

     $(':animated').stop(true).css('background','orange')

   })

 </script>

 </body>

 </html>
 

js进阶 13-6 jquery动画效果相关常用函数有哪些的更多相关文章

  1. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  7. 使用two.js生成的卫星环绕动画效果

    来源:GBin1.com two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现: webgl svg 2d画布 使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:T ...

  8. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  9. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

随机推荐

  1. 摄像头驱动——V4L2框架分析

    一.概述 Video for Linux 2,简称V4l2,是Linux内核中关于视频设备的内核驱动框架,为上层的访问底层的视频设备提供了统一的接口. 摄像头驱动是属于字符设备驱动程序.(分析linu ...

  2. whereis---定位指令的二进制程序、源代码文件和man手册页等相关文件的路径。

    whereis命令用来定位指令的二进制程序.源代码文件和man手册页等相关文件的路径. whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件 ...

  3. 紫书 例题 9-6 UVa 11400 (线性结构上的动态规划）

    这道题的下标从1开始比较方便,一方面前缀和算的方便一些,一方面涉及到前j 个灯泡,那么如果从0开始,前3个灯泡就是第0, 1, 2, 3个,非常奇怪. 所以灵活换下标. 然后这道题的动规有点暴力枚举的 ...

  4. Swift学习笔记(10)--枚举

    1.定义语法: enum SomeEnumeration { // enumeration definition goes here } 2.使用 enum CompassPoint { case N ...

  5. Android 第三方分享中遇到的问题以及解决方案

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 第三方登录和分享过程中难免遇到各种纠结的问题,下面将我遇到的分享给大家. 先说第三方登录 1.首先要 ...

  6. codevs 1019 集合论与图论

    1019 集合论与图论  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 集合论与图论对于小松来说 ...

  7. c#数据类型格式转换大全

    来源:网络 1.DateTime   数字型         System.DateTime currentTime=new System.DateTime();    1.1 取当前年月日时分秒   ...

  8. string StartsWith 方法 Https

    public ActionResult Index()        {            string url = "Https://www.baodu.com";      ...

  9. java使double保留两位小数的多方法

    java使double保留两位小数的多方法 java保留两位小数 mport java.text.DecimalFormat; DecimalFormat df = new DecimalFormat ...

  10. BootStrap_Table 学习

    https://blog.csdn.net/heting90/article/details/52248729 $("#realTime_Table").bootstrapTabl ...