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" ...
随机推荐
- Jmeter正则提取请求响应数据
前言 在测试时,我们经常需处理请求返回的响应数据,比如很多时候 cookie 或 token 或 Authorization授权码 会返回在 Response headers(响应头)中,这时我们便需 ...
- 如何优雅规避NPE
项目中尤其是在持久层,难免会有大量的针对集合,对象,字符串的操作,为了程序的健壮性,我们不得不进行判空,像下面箭头式编码吗? if(null!=person){ ... if(null!=addres ...
- Scrapy框架-爬虫程序相关属性和方法汇总
一.爬虫项目类相关属性 name:爬虫任务的名称 allowed_domains:允许访问的网站 start_urls: 如果没有指定url,就从该列表中读取url来生成第一个请求 custom_se ...
- 写了个爬虫代理ip的脚本给大家使用
写了个爬虫代理ip的脚本给大家使用 一.代码 import requests from lxml.html import etree url = 'http://www.kuaidaili.com/f ...
- ORM和Mybatis
ORM框架 概述 在学习MyBatis之前,先来看看什么是ORM框架. ORM全称Object/Relation Mapping,对象/关系数据库映射,功能为完成对象的编程语言到关系数据库的映射,可以 ...
- seaborn总结
Seaborn 数据可视化基础 介绍 Matplotlib 是支持 Python 语言的开源绘图库,因为其支持丰富的绘图类型.简单的绘图方式以及完善的接口文档,深受 Python 工程师.科研学者.数 ...
- js 报错 Uncaught TypeError: Cannot read property 'trim' of undefined
jquery Uncaught TypeError: Cannot read property 'trim' of undefined 报错原因及解决方案 $.trim() 函数用于去除字符串两端的空 ...
- eNSP仿真软件之利用三层交换机实现VLAN间路由
1.实验原理: VLAN将一个物理的LAN在逻辑上划分成多个广播域.VLAN内的主机间可以直接通信,而VLAN间不能直接互通. 在现实网络中,经常会遇到需要跨VLAN相互访问的情况,工程师通常会选择一 ...
- Codeforces Round #598 (Div. 3)
传送门 A. Payment Without Change 签到. Code /* * Author: heyuhhh * Created Time: 2019/11/4 21:19:19 */ #i ...
- day89_11_11Flask启动，配置，路由，fbv和cbv
一.flask的形成. flask是一个基于python并且以来jinja2模板和werkzeug wsgi服务器的一个微型框架. 安装了flask模块就代表安装了wekzeug,所以先安装flask ...