js进阶 13-4 jquery自定义动画animate()如何使用

一、总结

一句话总结：animate(params,[speed],[easing],[fn])，参数：params:一组包含作为动画属性和终值的样式属性和及其值的。

1、animate中的样式设置的时候的注意事项是什么？

样式名必须以驼峰式方式，不然会出错，和在css中的不一样

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

2、jquery库的animate方法的缺陷是什么？

19     //jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性

3、jquery位移动画如何实现？

设置为绝对定位了才能移动left和top

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

30             $('#div1').animate({

31                 left:'300px',

32                 top:'300px'

33             })

34         })

4、jquery累积动画如何实现？

直接在animate()里面+=即可

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

36             $('#div1').animate({

37                 left:'+=50px',

38             })

39         })

二、jquery自定义动画animate()如何使用

1、自定义动画

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

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

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

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

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

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <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: 150px;height: 150px;border:1px solid green;background: orange;position: absolute;}

       </style>

 </head>

 <body>

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

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

     <input id="btn2" type="button" value="位移">

     <input id="btn3" type="button" value="累积动画">

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

     <script>

     //jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性

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

             $('#div1').animate({

                 width:'50px',

                 height:'50px',

                 fontSize:'0.5em',

                 opacity:0.5,

                 backgroundColor:'red'

             },2000)

         })

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

             $('#div1').animate({

                 left:'300px',

                 top:'300px'

             })

         })

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

             $('#div1').animate({

                 left:'+=50px',

             })

         })

     </script>

 </body>

 </html>
 

js进阶 13-4 jquery自定义动画animate()如何使用的更多相关文章

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

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

  2. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  3. 自定义动画animate()

    在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...

  4. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  5. Jquery 自定义动画同步进行如何实现？

    需求描述:我需要对不懂的两个HTML对象进行操作,同时开始动画,同时结束动画. 遇到问题:如果先后对连个对象进行 animate动画,那么第一个会先运行,等第一个运行完了运行第二个,这样就不同步了. ...

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

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

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

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

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

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

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

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

随机推荐

  1. HDU 5384 Danganronpa （AC自己主动机模板题）

    题意:给出n个文本和m个模板.求每一个文本中全部模板出现的总次数. 思路:Trie树权值记录每一个模板的个数.对于每一个文本跑一边find就可以. #include<cstdio> #in ...

  2. J2EE之13个规范标准概念

    主要是关于j2EE十三个规范的总结. java基础知识 首先java分为三类:J2ME.J2SE.J2EE. 依据开发软件的大小和量级他们的作用分别不同,J2ME是开发为机顶盒.移动电话和PDA之类嵌 ...

  3. C语言的有符号与无符号,二进制整数的扩展与截断

    C语言的有符号与无符号,二进制整数的扩展与截断 前一节说了整数的表示方式,,也就是无符号编码与补码编码.这一届说一下二进制整数的扩展与截断,这部分内容与C语言挂钩.so,我们先看下面C语言的有符号和无 ...

  4. 配置远程访问阿里云服务器的Redis

    1.默认情况Redis不是在后台运行,我们需要修改把redis放在后台运行:daemonize yes 2.Redis安全策略默认本机访问,所以远程访问的话需要将 bind 127.0.0.1加#注释 ...

  5. 77.深入理解nodejs中Express的中间件

    转自:https://blog.csdn.net/huang100qi/article/details/80220012 Express是一个基于Node.js平台的web应用开发框架,在Node.j ...

  6. 图片的title属性和alt属性的区别

    在前端开发中,经常遇到有人在问图片的alt属性和title属性的区别,这是因为很多人对于alt属性和title属性没有彻底搞明白,今天零度给大家分析分析. title属性 首先,来看一下什么是titl ...

  7. codeforces 688D

    题意: 给你n和k,表示有n个数,c1到cn,然后让你求一个数x,可以告诉你x%ci的值,问你是否可以唯一确定一个x%k的值 题解: 反证: 假设有两个x1,x2同时是解,则对于所有ci,x1%ci= ...

  8. RecyclerView具体解释

    public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild { 由上面的继承结 ...

  9. Exclusive or

    题目连接 题意: 每次给一个n.求 (2≤n<10500) 分析: 先说一下自己的想法,假设将n换成二进制数,也就一两千位左右,那么一位一位处理是能够接受的. 将0-n写成二进制形式后,显然全部 ...

  10. HDU 1166 敌兵布阵 Segment Tree题解

    本题是最主要的分段树操作了.或者一般叫线段树,只是好像和线段没什么关系,仅仅是分段了. 不使用lazy标志,更新仅仅是更新单点. 假设不使用分段树,那么更新时间效率仅仅须要O(1),使用分段树更新效率 ...