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. Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-qvc66dfs/supervisor/

    # 安装supervisor 出错 pip3 install supervisor # 解决 sudo pip3 install supervisor

  2. 六台机器搭建RedisCluster分布式集群

    原文:六台机器搭建RedisCluster分布式集群 版权声明:m_nanle_xiaobudiu https://blog.csdn.net/m_nanle_xiaobudiu/article/de ...

  3. 【Henu ACM Round#15 A】 A and B and Chess

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 统计大写和小写的个数. 比较答案.输出即可. [代码] #include <bits/stdc++.h> using n ...

  4. [Python] Check for None (Null) in Python

    If you’ve used other programming languages, you may have learned that an empty object is not the sam ...

  5. Cocos2d-x--iOS平台lua加密成luac资源方法和Jsc文件&lt;MAC平台开发试用--windows平台暂未研究&gt;

        首先要说.近期真的是太忙了.好久没写博客了,今天正好有空,就写一下近期在写游戏中的一些发现:     话说,基于Cocos2dx 引擎 + 脚本写游戏,至今的感触就是能够进行增量更新和即时编译 ...

  6. ajax动态更新下拉列表

    前面做了一个ajax的小demo,今天看一个动态更新下拉列表,或者也叫级联更新下拉列表,这个也是利用ajax的异步调用去后台实现数据请求.然后回到前台完毕下拉列表数据的更新,以增强web应用的交互性. ...

  7. .Net MVC小尝试

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  8. POJ 2394 Dijkstra

    题意: 思路: 裸的Dijkstra 爆敲一发模板 //By SiriusRen #include <queue> #include <cstdio> #include < ...

  9. django shell 操作

    插件:django-extensions django-extensions==1.9.8 pip3 install  django-extensions 1.数据库shell 命令(项目目录下) p ...

  10. JavaScript全讲-架构原则解析

    因为近期一直在忙,非常久没有更新,见谅. 上篇我们讲完JavaScript函数式编程的特性,今天我们就来聊聊JavaScript中的架构. 提到JavaScript架构.非常多人会认为不可思议,由于架 ...