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. GCJ1C09C - Bribe the Prisoners

    GCJ1C09C - Bribe the Prisoners Problem In a kingdom there are prison cells (numbered 1 to P) built t ...

  2. python程序转exe程序之一——cx_Freeze

    原始网页 : http://keliang.blog.51cto.com/3359430/661884 本人用的64位系统,一开始装了32位的cx_freeze,结果貌似无法自动找到本地的python ...

  3. [Python] Manipulate Data with Dictionaries in Python

    Dictionaries may be familiar to you as hash maps. In this lesson, you will learn how to create them, ...

  4. 【shell学习】经常使用条件推断-字符，数字，文件

    IF 推断 之前也写过简单的shell脚本,也不是转职运维.和系统相关的工作比較少.所以不怎么熟练. 近期因为系统总是出现各种乱七八糟的问题,也没有人来协助.仅仅好自己写shell脚本了,都是些基础的 ...

  5. 从Java到C++——常量的使用规则

    常量是一种标识符,它的值在执行期间恒定不变.C语言用 #define来定义常量(称为宏常量). C++ 语言除了 #define外还能够用const来定义常量(称为const常量). 一.为什么须要常 ...

  6. js---12数据类型,数据类型转换，NaN,

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. K短路 spfa + A*

    #include <stdio.h> #include <string.h> #include <queue> #include <algorithm> ...

  8. ElasticSearch 5.2.2 安装及 head 插件的安装

    ElasticSearch 是一个基于 Lucene 的高度可扩展的开源全文搜索和分析引擎.它能够做到可以快速.实时地存储.搜索和分析大量数据.它通常作为底层引擎/技术,为具有复杂搜索功能和要求的应用 ...

  9. 解决root登录 -bash-4.2# 的问题

  10. [置顶] Docker学习总结（2）——Docker实战之入门以及Dockerfile（二）

    csphere/php-fpm:5.4 # cd docker-training/php-fpm/ # ls Dockerfile nginx_nginx.conf supervisor_nginx. ...