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中将具有数字属性名的对象转换为数组
Mar 06 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
js获取height和width的方法说明
Jan 06 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
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简单命令代码集锦
2007/09/24 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php中curl使用指南
2015/02/05 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python3基础之list列表实例解析
2014/08/13 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
python编写Logistic逻辑回归
2020/12/30 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
中式面点餐厅创业计划书
2014/01/29 职场文书
大学毕业感言50字
2014/02/07 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python