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" ...
随机推荐
- Winform中设置BackgroundWorker在取消时关闭后台进程
场景 在Winform中拖拽 一个BackgroundWorker控件,配合进度条控件能开启一个后台线程并报告进度条进度. 但是在执行后台线程的任务时,如果想要取消,怎样让其停止执行. 注: 博客主页 ...
- java基础(2):注释、关键字、标识符、数据
1. 注释.关键字与标识符 大家可以安装一个文本编辑软件notepad++,有利于java代码的查看与编写. 1.1 程序注释 通常我们需要在源代码中添加文字用来对进行代码解释说明,但这些文字并不是J ...
- Java生鲜电商平台-交易对账以及跟商家对账的思考
Java生鲜电商平台-交易对账以及跟商家对账的思考 说明:对于任何一家电商而言,资金的安全尤为重要,在资金管理过程中,涉及到交易订单的对账以及商家的对账,那i么如何来保证对账的高效与准确呢? 公司在搭 ...
- 假设高度已知，请写出三栏布局，其中左右各为300px 中间自适用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 深入浅出之js闭包知识点梳理（一）
简单认识闭包 前言:和大多数编程语言一样,js也采用词法作用域,即函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.函数对象可以通过作用域链关联起来,函数体内部的 ...
- dedecmsV5.7 arclist标签同时取出主表和附表里的数据
{dede:arclist}{/dede:arclist}标签默认取出来的是主表x_archives中的数据,如果要取出附表中的数据,需要满足两个条件: 指定channelid属性(注意:channe ...
- CCPC2018-湖南全国邀请赛
传送门 A - Easy \(h\)-index 签到. Code /* * Author: heyuhhh * Created Time: 2019/10/29 11:58:23 */ #inclu ...
- Java解析XML字符串，取出其中<aaaa><![CDATA[(XXX)]]></aaa>里面的XXX值，也可以使用xml解析的其他方式，这是最简单的字符串解析
直接贴一段业务代码,这段代码是解析请求返回的xml格式字符串,为了取出其中的值便于下一步的使用. @RequestMapping(value="/search",produces ...
- 阿里Nacos初体验
Nacos 从开源到现在已经18个releases了,更新很快,社区也很活跃,光钉钉群的人数那也是好多,每次点个查看全部成员的按钮,我的钉钉就要卡死,也有可能我没更新最新的版本. 前面写了一段时间的S ...
- Python自动群发邮件，只需20行代码！
今日分享 Python自动群发邮件 import smtplib from email import (header) from email.mime import (text, applicatio ...