定义和用法

animate() 方法执行 CSS 属性集的自定义动画。
该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
提示：请使用 "+=" 或 "-=" 来创建相对动画。

语法

  1. $(selector).animate({styles},speed,easing,callback)

参数

参数 必需的 描述
styles 是
规定产生动画效果的一个或多个 CSS 属性/值。
注意：当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。
可以应用动画的属性：
提示：颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色，您需要从 jQuery.com 下载 颜色动画插件。
speed 否
规定动画的速度。
可能的值：
  • 毫秒
  • "slow"
  • "fast"
easing 否
规定在动画的不同点中元素的速度。默认值是 "swing"。
可能的值：
  • "swing" - 在开头/结尾移动慢，在中间移动快
  • "linear" - 匀速移动
提示：扩展插件中提供更多可用的 easing 函数。
callback 否
animate 函数执行完之后，要执行的函数。
如需学习更多有关 callback 的内容，请访问 jQuery Callback 。

实例

下例演示了animate()方法的简单用法; 它将<div>元素向右移动，直到它达到250px的left属性：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>欢迎来到蝴蝶教程</title>
  6. //此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
  7. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  8. <script>
  9.      $(document).ready(function () {
  10.        $("button").click(function(){
  11.           $("div").animate({left: '250px'});
  12.        });
  13.      });
  14. </script>
  15. </head>
  16. <body>
  17.           <button>开始动画</button>
  18.           <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
  19.           如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  20.           <div style="background:#009688;height:100px;width:100px;position:absolute;"></div>
  21. </body>
  22. </html>

　　

相关知识

　　

jQuery animate() 方法的更多相关文章

  1. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  2. jquery animate()方法 语法

    jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...

  3. jquery animate()方法使用的注意事项

    当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margi ...

  4. 关于JQuery animate()方法

    html: <button>点击我</button> <p>如果你想在一个涉及动画的函数之后来执行语句,请使用callback函数</p> <di ...

  5. jQuery 效果 - 动画 animate() 方法

    我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...

  6. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  7. 使用jQuery的animate方法制作滑动菜单

    周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...

  8. Jquery动画方法 jquery.animate()

    目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法 animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...

  9. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

随机推荐

  1. 【数据结构】什么是二叉查找树（BST）

    什么是二叉查找树(BST) 1. 什么是BST 对于二叉树中的每个节点X,它的左子树中所有项的值都小于X中的项,它的右子树中所有项的值大于X中的项.这样的二叉树是二叉查找树. 以上是一颗二叉查找树,其 ...

  2. 修改shell命令提示符和命令的输入颜色

    修改命令提示符颜色 修改命令提示符的话,只需修改PS1环境变量即可. PS1='\[\033[01;31m\][\u@\h \W]$ \[\033[00m\]' 效果如图: 修改命令输入的颜色 修改命 ...

  3. Windows7中启动Mysql服务时提示：拒绝访问的一种解决方式

    场景 在Windows7中打开任务管理器--服务下 找到mysql的服务点击启动时提示: 拒绝访问 这是因为权限不够导致的不能启动sql服务. 点击 任务管理器右下角的服务 在这里就可以正常启动服务

  4. windows提权

    提权辅助 https://bugs.hacking8.com/tiquan/

  5. Linux 释放cache

    sysc 将所有未写的系统缓冲区写到磁盘中,包含已修改的 i-node.已延迟的块 I/O 和读写映射文件 echo 3 > /proc/sys/vm/drop_caches To free p ...

  6. 从0系统学Android-2.6Activity间数据传递

    本系列文章,参考<第一行代码>,作为个人笔记 更多内容:更多精品文章分类 2.3.4 向下一个 Activity 传递数据 前面学习了使用 Intent 来启动一个 Activity ,其 ...

  7. Access denied for user 'root@localhost' (using password:NO)问题的解决

    错误详情: 使用pymysql连接数据库mysql,一直无法连接上, conn = pymysql.connect(host='localhost', port=3306, user='root', ...

  8. [Linux] 安装grafana并且添加influxdb监控

    安装grafana,官网提供了ubuntu的安装包,直接进行安装 wget https://dl.grafana.com/oss/release/grafana_6.5.1_amd64.deb dpk ...

  9. 201871010105-曹玉中《面向对象程序设计（Java）》第一周学习总结

    201871010105-曹玉中<面向对象程序设计(Java)>第一周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  10. (转)vue-router原理

    转载地址:https://segmentfault.com/a/1190000014822765 随着前端应用的业务功能起来越复杂,用户对于使用体验的要求越来越高,单面(SPA)成为前端应用的主流形式 ...