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 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
使用vue制作滑动标签
Sep 21 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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(一)
2012/03/21 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
总结js函数相关知识点
2018/02/27 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
Python正则表达式使用经典实例
2016/06/21 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python画微信表情符的实例代码
2019/10/09 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
保卫科工作岗位职责
2014/03/01 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
村安全生产责任书
2014/08/25 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
Redis keys命令的具体使用
2022/06/05 Redis