jQuery动画animate方法使用介绍


Posted in Javascript onMay 06, 2013
$(function() { 
$("#left").click(function(){ 
$(".block").show(); 
$(".block").animate({ 
width: "+200px", 
height: "+200px", 
fontSize: "1em", 
borderWidth: 10 
}, "slow","swing"); 
}); 
$("#right").click(function(){ 
$(".block").show(); 
$(".block").animate({ 
width: "-200px", 
height: "-200px", 
fontSize: "10em", 
}, "slow","swing"); 
}); 
/* 
$("p").animate({ 
height: '200px', opacity: 'toggle' 
}, "slow"); 
$("p").animate({ 
left: 50, opacity: 'show' 
}, 500); */ 
//先渐隐 
$("p").animate({ 
opacity: 'toggle' 
}, "slow", "swing"); 
//后显示 
$("p").animate({ 
opacity: 'show' 
}, 500,function() { alert('加载完成'); }); 
}); 
</script> 
</head> 
<body> 
<button id="left">向右移动</button> <button id="right">向左移动</button> 
<div class="block">张梓宇测试</div> 
<p>

返回值:jQueryanimate(params, [duration], [easing], [callback])
概述
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
参数
paramsOptions一组包含作为动画属性和终值的样式属性和及其值的集合
duration (可选)String,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
callback (可选)Function在动画完成时执行的函数
示例
描述:
点击按钮后div元素的几个不同属性一同变化
HTML 代码:
// 在一个动画中同时应用三种类型的效果 
$("#go").click(function(){ 
$("#block").animate({ 
width: "90%", 
height: "100%", 
fontSize: "10em", 
borderWidth: 10 
}, 1000 ); 
});

描述:
让指定元素左右移动
HTML 代码:
$("#right").click(function(){ 
$(".block").animate({left: '+50px'}, "slow"); 
}); 
$("#left").click(function(){ 
$(".block").animate({left: '-50px'}, "slow"); 
});

描述:
在600毫秒内切换段落的高度和透明度
jQuery 代码:
$("p").animate({ 
height: 'toggle', opacity: 'toggle' 
}, "slow");

描述:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:
$("p").animate({ 
left: 50, opacity: 'show' 
}, 500);

描述:
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:
$("p").animate({ 
opacity: 'show' 
}, "slow", "easein");
Javascript 相关文章推荐
js option删除代码集合
Nov 12 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
为原生js Array增加each方法
Apr 07 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
js 概率计算(简单版)
Sep 12 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
JS修改css样式style浅谈
May 06 #Javascript
用JavaScript修改CSS属性的代码
May 06 #Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 #Javascript
You might like
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
详解js的六大数据类型
2016/12/27 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
vue文件树组件使用详解
2018/03/29 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python实现按中文排序的方法示例
2018/04/25 Python
python如何读取bin文件并下发串口
2019/07/05 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
小学家长学校培训材料
2014/08/24 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS