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. JS jQuery查看系统中安装的字体

    1.下载插件:FontDetect插件  地址:http://www.lalit.org/lab/javascript-css-font-detect/ 或者复制以下代码到fontdetect.js: ...

  2. 小米开源便签Notes-源码研究(2)-定时提醒的便签

    本篇讲述小米便签中的定时提醒功能.  便签,可以理解为一件事情,一项任务,有个定时提醒的功能,还是蛮不错的~    小米便签定时功能,是当编辑便签的时候,有个菜单项,选了之后,就弹出一个"日 ...

  3. Vue绑定事件

    <!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> ...

  4. elasticsearch index之Translog

    跟大多数分布式系统一样,es也通过临时写入写操作来保证数据安全.因为lucene索引过程中,数据会首先据缓存在内存中直到达到一个量(文档数或是占用空间大小)才会写入到磁盘.这就会带来一个风险,如果在写 ...

  5. HttpWebRequest使用证书请求

    HttpWebRequest使用证书请求 //是否使用证书                if (isUseCert)                {                    stri ...

  6. shell项目-分发系统-expect讲解

    shell项目-分发系统-expect讲解 yum install -y expect 1. 自动远程登录 #! /usr/bin/expect set host "192.168.133. ...

  7. src/MD2.c:31:20: 错误：Python.h：没有那个文件或目录

    一.前言 在CentOS 上安装fabric时出现问题,首先已安装pip, 用pip执行以下命令pip install 出现以下问题 [niy@niy-computer /]$ sudo pip in ...

  8. [ReasonML] Named & optional params

    // ::country is named param // ::country=?: which make it optional // because we make ::country=? op ...

  9. bug 7715339 登录失败触发 ‘row cache lock’ 等待

    Bug 7715339 - Logon failures causes "row cache lock" waits - Allow disable of logon delay ...

  10. Android仿Win8界面的button点击

    今天没事的时候,感觉Win8的扁平化的button还是挺好看的,就研究了下怎样在安卓界面实现Win8的扁平化button点击效果. 发现了一个自己定义的View能够实现扁平化button效果,话不多说 ...