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类中获取外部函数名的方法
Aug 19 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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如何使用cURL实现Get和Post请求
2020/07/11 PHP
js取消单选按钮选中示例代码
2013/11/14 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python如何发送与接收大型数组
2020/08/07 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
医德医风个人总结
2015/02/28 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android