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. Android控件ToggleButton的使用方法

    ToggleButton(开关button)是Android系统中比較简单的一个组件,是一个具有选中和未选择状态双状态的button.而且须要为不同的状态设置不同的显示文本. ToggleButton ...

  2. modSecurity规则学习（一）——配置文件

    环境:modSecurity3.0,nignx1.13.8 modSecurity配置文件 1.nginx.conf server { listen ; modsecurity on; //启动mod ...

  3. 洛谷P2818 天使的起誓

    题目描述 Tenshi非常幸运地被选为掌管智慧之匙的天使.在正式任职之前,她必须和其他新当选的天使一样要宣誓.宣誓仪式是每位天使各自表述自己的使命,他们的发言稿放在n个呈圆形排列的宝盒中.这些宝盒按顺 ...

  4. SqlDatasource简单用法

    http://blog.csdn.net/zxf1by1/article/details/7055015 增删改查和前台页面(拖拽过来的,但是包含参数的)

  5. Vectorized implementation

    Vectorization Vectorization refers to a powerful way to speed up your algorithms. Numerical computin ...

  6. 游标 scroll

    scroll表示可随意移动游标指针(否则只能向前)

  7. BOOT项目依赖另外一个模块的包，开发的时候都正常，执行clean package打包成jar时却提示依赖的模块包不存在。

    我在service1模块里依赖了common模块,开发的时候包都能正常引用到,启动也能正常测试访问,可是奇怪的是,当我要打包成jar包时,就提示service1里依赖common的包都不存在,之前从没 ...

  8. 小程序中关于获取app实例与当前组件

    1.getApp()来获取 App 实例 2.getCurrentPages()获取前页面栈

  9. 初学h5须知

    9.41.浏览器是页面的环境(类似水是鱼的环境)2.浏览器结构:title    标题,题目                           URL      网址                ...

  10. 解决Docker容器内访问宿主机MySQL数据库服务器的问题

    懒得描述太多,总归是解决了问题,方法简要记录如下,虽然简要,但是完整,一来纪念处理该问题耗费的大半天时间,二来本着共享精神帮助其他遇到该问题的哥们儿,当然这个方法并不一定能解决你们的问题,但是多少能提 ...