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. MYSQL去重复并计算总数的sql语句

    SELECT count(distinct uid) FROM `two_users`

  2. C++ lambda表达式 （二）

    #include <functional> #include <iostream> int main() { using namespace std; int i = 3; i ...

  3. HDU——T 1556 Color the ball

    http://acm.hdu.edu.cn/showproblem.php?pid=1556 Time Limit: 9000/3000 MS (Java/Others)    Memory Limi ...

  4. idle-实现清屏

    最近在学习python的时候,需要用到ubuntu的python idle.这个工具可以测试python语法.但是呢,在使用的过程中遇到了一个问题.就是随着你的输入,你会发现这个输入会停留在这个界面的 ...

  5. 6.cocos2d设置定时器

    T1LayerAnchorPoint.h #pragma once #include "cocos2d.h" USING_NS_CC; class T1LayerAnchorPoi ...

  6. ASP.NET Web.config学习

    花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <? ...

  7. deep-in-es6(四)

    不定参数和默认参数: function containsAll(str) { for(var i = 1;i < arguments.length;i++) { var hasStr = arg ...

  8. 解决create-react-app 后 npm start 中出现 的webpack版本问题和webpack-dev-server的版本问题

    利用VSCode搭建react的脚手架运行环境的时候.create-react-app之后npm start出现如下图的问题: There might be a problem with the pr ...

  9. nodejs基础部分（一）

    前言 业余时间充实自我,入手学习了解一下传说中纯事件驱动/非阻塞的js架构 --nodejs 好记性不如烂笔头,本系列随笔用于整理记录学习nodejs过程中的心得 目录 nodejs简介 nodejs ...

  10. docker部署mysql 实现远程连接

    1. docker search mysql    # 查看mysql版本 2. docker pull mysql:5.7   # 拉取mysql 5.7 3. docker images  # 查 ...