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. oracle基础入门（二）

    一:Oracle和plsql都安装成功 我们现在要链接自己本机Oracle 或者 远程服务器的Oracle 所有我们要找到tnsnames.ora 找到PLsql的 db_1我的地址F:oracle\ ...

  2. 【Linux环境编程】获取网卡的实时网速

    在windows以下.我们能够看到360或者是qq安全卫士的"安全球".上面显示实时的网速情况.那么在linux里面怎样获取网卡的实时网速?事实上原理非常easy,读取须要获取网速 ...

  3. POJ 1014 Dividing 背包

    二进制优化,事实上是物体的分解问题. 就是比方一个物体有数量限制,比方是13,那么就须要把这个物体分解为1. 2, 4, 6 假设这个物体有数量为25,那么就分解为1, 2, 4. 8. 10 看出规 ...

  4. HDU 4173 Party Location（计算几何，枚举）

    HDU 4173 题意:已知n(n<=200)位參赛选手的住所坐标.现要邀请尽可能多的选手来參加一个party,而每一个选手对于离住所超过2.5Km的party一律不去,求最多能够有多少个选手去 ...

  5. 55.npm install 报错 ：stack Error: Can't find Python executable "python"

    转自:https://www.cnblogs.com/zengry/p/8044379.html 解决方法 : 1. 安装python , 设置环境变量 :cmd --> path='%path ...

  6. 什么是老板思维，什么是员工思维，深有体会，最近被N个行业洗脑……

    什么是老板思维,什么是员工思维,深有体会,最近被N个行业洗脑……

  7. postgresql sql语句 更改表名

    SELECT'alter table "public"."'|| t.tablename||'"'||' rename to "'|| "l ...

  8. 搭建Spark源码研读和代码调试的开发环境

    转载自https://github.com/linbojin/spark-notes/blob/master/ide-setup.md 搭建Spark源码研读和代码调试的开发环境 工欲善其事,必先利其 ...

  9. 【Django】MEDIA的配置及用法

    如果需要在数据库中存储图片或视频类的数据,我们可以配置MEDIA. 下面的示例将以上传一张图片的形式来说明MEDIA的配置及用法. 第一步 settings.py # media配置 MEDIA_UR ...

  10. 【Codeforces Round #456 (Div. 2) A】Tricky Alchemy

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 统计需要的个数. 不够了,就买. [代码] #include <bits/stdc++.h> #define ll lo ...