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. centos inotify-rsync配置

    安装 yum -y install inotify-tools yum install rsync innotify说明 inotify介绍-- 是一种强大的.细颗粒的.异步的文件系统监控机制,*&a ...

  2. CodeForcesGym 100502E Opening Ceremony

    Opening Ceremony Time Limit: 5000ms Memory Limit: 524288KB This problem will be judged on CodeForces ...

  3. 学一下gconv, gprof等知识

    scons.gcc.gdb.valgrind.gcov SCons 是一个用 Python 语言编写的类似于 make 工具的程序.与 make 工具相比较,SCons 的配置文件更加简单清晰明了. ...

  4. zoj1942Frogger

    Frogger Time Limit: 2 Seconds      Memory Limit: 65536 KB Freddy Frog is sitting on a stone in the m ...

  5. OpenCASCADE 麻花钻头造型实例分析

    OpenCASCADE 麻花钻头造型实例分析 eryar@163.com Abstract. OpenCASCADE provides a simple twist drill bit modelin ...

  6. 44.Node.js Express 框架--web框架

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 简介 Express 是一个简洁而灵活的 node.js W ...

  7. HttpWebRequest使用证书请求

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

  8. c# for 和 foreach

    1给定长度 不需要计算长度的 for比foreach循环效率高 2 在不确定长度 或者计算长度有性能损耗的时候 用foreach比较方便 2336 循环语句是编程的基本语句,在C#中除了沿用C语言的循 ...

  9. 关于IDEA编译器在初次使用thymeleaf 引入无效 , 导致th无法使用的原因

    首先pom.xml里面要导入thymeleaf的依赖 然后在html中加入  xmlns:th="http://www.thymeleaf.org" 最后点击file ---> ...

  10. C# 将引用的DLL文件放到指定的目录下

    原文:C# 将引用的DLL文件放到指定的目录下 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sweety820/article/details/2 ...