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" ...
随机推荐
- python强大的绘图模块matplotlib示例讲解
Matplotlib 是 Python 的绘图库.作为程序员,经常需要进行绘图,在我自己的工作中,如果需要绘图,一般都是将数据导入到excel中,然后通过excel生成图表,这样操作起来还是比较繁琐的 ...
- ETCD:多机上的集群
原文地址:cluster on multiple machines 总览 启动一个集群静态的要求是每一个集群中的成员需要知道其他成员的位置.在许多情况下,集群成员的IP可能无法提前知道.在这种情况下, ...
- 移动端触发touchend后阻止click事件
// vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...
- Python中经典排序方法
数据的排序是在解决实际问题时经常用到的步骤,也是数据结构的考点之一,下面介绍10种经典的排序方法. 首先,排序方法可以大体分为插入排序.选择排序.交换排序.归并排序和桶排序四大类,其中,插入排序又分为 ...
- Java生鲜电商平台-电商数据运营统计与分析
Java生鲜电商平台-电商数据运营统计与分析 今天分享将会分为以下几个方面来阐述: 1. 作为运营我们需要统计与分析的几个核心数据是什么? 2. 核心数据对业务的指导价值在哪里呢? 3. 作为产品PM ...
- 代码审计 => 74cms_v3.5.1.20141128 一系列漏洞
0x01 前言 最近开始在学习代码审计了,以前几次学习代码审计都因为不知道如何下手,和代码的复杂就放弃了,这一次算是真正的认真学习,同时seay所编写的<代码审计 企业级Web代码安全架构> ...
- 对vue-cli各个目录的理解 和 在 vue 中使用json-server
看了几章书,看到了vue模板,看不下去哦,就找了一个B站的vue视频来看,下面进行总结. 学习一个语言,框架,CRUD..先学会. 重点就是最为常用的几个语句.学得不多,感慨挺多.. 前提:下载好vu ...
- layui 获取radio单选框选中的值
Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio& ...
- [JavaScript]父子窗口间参数传递
概述 当页面嵌入一个iframe,或者打开一个子窗口.这个时候如果父窗口需要与子窗口之间通讯,如果直接用DOM访问对方窗口window,会受到跨于安全机制影响. javascript提供一个方法,可以 ...
- Less（3）
1.先判断注入类型 (1)首先看到要求,要求传一个ID参数,并且要求是数字型的:?id=1 (2)再输入?id=1' 显示报错,报错信息多了一个括号,判断接收到的参数可能为id=('1') (3)输入 ...