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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
Vue实现点击后文字变色切换方法
Feb 11 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
小程序实现录音功能
Sep 22 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
php处理复杂xml数据示例
2016/07/11 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
javascript连续赋值问题
2015/07/08 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
python中的sort方法使用详解
2014/07/25 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
四年级下册教学反思
2014/02/01 职场文书
优秀幼教自荐信
2014/02/03 职场文书
教师节促销活动方案
2014/02/14 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
药店采购员岗位职责
2014/09/30 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
养成教育工作总结
2015/08/13 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python