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. expr---计算工具

    expr命令是一款表达式计算工具,使用它完成表达式的求值操作. expr的常用运算符: 加法运算:+ 减法运算:- 乘法运算:\* 除法运算:/ 求摸(取余)运算:% 语法 expr(选项)(参数) ...

  2. 紫书 习题 10-16 UVa 1647 (高精度+递推）

    这道题我已经推出00和1过两步变成00了,可我没有继续做下去-- 后来看了博客发现自己已经做了90%了-- 可惜了,以后不要轻易放弃. 1的个数有个规律,就是每次都乘以2,因为0和1下一步都会变出1 ...

  3. 阿里云server改动MySQL初始password---Linux学习笔记

    主要方法就是改动 MySQL依照文件以下的my.cnf文件 首先是找到my.cnf文件. # find / -name "my.cnf" # cd /etc 接下来最好是先备份my ...

  4. WebView的截屏实现

    WebView的截屏主要有两种实现方式: 方式1: bitmap = webView.getDrawingCache(); 可是,webView必需要mWebView.setDrawingCacheE ...

  5. VTK的安装配置-使用VS2010

    1.CMake的安装 CMake安装是用来对VTK编译前的配置工作.此博客中使用的是CMake2.8.CMake的下载可到https://cmake.org/站点上进行下载. 2.VTK源代码 VTK ...

  6. Java io流的学习

    近期几天细致学了Java的io流.本来是打算看视频通过视频来学习的.但是后来发现事实上视频看不怎么懂也感觉不是非常easy上手,所以就通过百度和api文档学习了Java的io流 io流能够有两个分类, ...

  7. 解决 php7 cli 模式下中文乱码的两中方法

    解决 php7 cli 模式下中文乱码的两中方法1. 给PHP文件开头加上 exec('chcp 936'); 然后把该文件以 ANSI 格式编码2. 在 php.ini 中设置 default_ch ...

  8. js --- 事件流

    1.事件流 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流. 2.两种事件流模型 1.冒泡型事件流:事件的传播是从最特定的事件目标 ...

  9. 关于li的排列，我的面试题

    来到北京的第二周,收到了单位的面试,一面的时候面试官问了微信钱包里的那个快速入口的排列,我当时在面试官的引导下答的还可以,但是在实际中有很多的方法和各自不同的问题,我来总结下. 1.flex布局,其实 ...

  10. Javascript和jquery事件--事件冒泡和事件捕获

    jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程,在有关jq的描述中,jq是兼容现有的主流浏览器,比如谷歌.火狐,safari等(当然是指较新的版 ...