jQuery animate() 方法
定义和用法
语法
$(selector).animate({styles},speed,easing,callback)
参数
| 参数 | 必需的 | 描述 |
|---|---|---|
| styles | 是 |
规定产生动画效果的一个或多个 CSS 属性/值。
注意：当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。
可以应用动画的属性：
提示：颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色，您需要从 jQuery.com 下载 颜色动画插件。
|
| speed | 否 |
规定动画的速度。
可能的值：
|
| easing | 否 |
规定在动画的不同点中元素的速度。默认值是 "swing"。
可能的值：
提示：扩展插件中提供更多可用的 easing 函数。
|
| callback | 否 |
animate 函数执行完之后，要执行的函数。
如需学习更多有关 callback 的内容，请访问 jQuery Callback 。
|
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
//此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#009688;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
相关知识
jQuery animate() 方法的更多相关文章
- jQuery animate方法开发极客标签Logo动画融合效果
在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...
- jquery animate()方法 语法
jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...
- jquery animate()方法使用的注意事项
当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margi ...
- 关于JQuery animate()方法
html: <button>点击我</button> <p>如果你想在一个涉及动画的函数之后来执行语句,请使用callback函数</p> <di ...
- jQuery 效果 - 动画 animate() 方法
我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...
- jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...
- 使用jQuery的animate方法制作滑动菜单
周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...
- Jquery动画方法 jquery.animate()
目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法 animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...
- jQuery 效果 - animate() 方法
http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...
随机推荐
- JAVA集合框架（二）-List和Set
List的常用实现类 list集合是有序的,顺序即添加的顺序,元素是可重复的. ArrayList LinkedList Vector ArrayList 底层基于数组实现.在add元素的过程中,如果 ...
- django.db.utils.OperationalError: (1093, "You can't specify target table 'xxx' for update in FROM clause")
这个错误的意思是,不能在update某张表的where条件中,再次select这张表的某些值作为筛选条件,比如: update message set content = "hello&qu ...
- 基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术-Angel工作室通用权限管理
一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...
- Exception,异常处理操作try{}catch(XXXException e){}finally{}
package seday07.exception;/** * @author xingsir * try-catch 异常处理机制 * 语法: * try{ * 代码片段 * }catch(XXXE ...
- PHP给图片加上图片水印和文字水印实例
下面给大家分享一下PHP给图片加上图片水印和文字水印实例,这也是网站经常用到的功能,把代码加上去,调用就很简单了. 核心代码: function imageWaterMark($groundImage ...
- SQLServer之GROUP BY语句
GROUP BY 语句 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. SQL GROUP BY 语法 SELECT column_name, aggregate_func ...
- 【Unity】 关于Package Manager 无限加载的问题(Loading Packages)，以及可能的解决办法（待补充。）
·版本:2019.1.8f 官方论坛对于此问题的讨论:地址>Package Manager 许多人都遇到了这个问题,但是无法定位问题出在哪里.官方技术人员提供了一个名为 Package Mana ...
- JS 验证
JS 验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML ...
- xBIM 综合使用案例与 ASP.NET MVC 集成（一）
XbimWebUI是一个Javascript库,可用于BIM模型的Web表示.它使用WebGL并且独立于任何第三方WebGL框架.查看器的数据格式为WexBIM.不能直接加载IFC文件. 一.将IFC ...
- linux 软件包的组成部分
软件包的组成部分 1. 二进制文件 比如:/bin, /sbin & /usr/bin, /usr/sbin & /usr/local/bin, /usr/local/sbin 2.库 ...