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 相关文章推荐
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
js中call与apply的用法小结
Dec 28 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
JavaScript实现图片放大预览效果
Nov 02 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实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
javascript中UMD规范的代码推演
2018/08/29 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
layui实现三级导航菜单
2019/07/26 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python绘制圆柱体的方法
2018/07/02 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
P/Invoke是什么
2015/07/31 面试题
高职教师岗位职责
2013/12/24 职场文书
体育课外活动总结
2014/07/08 职场文书
忠诚教育心得体会
2014/09/03 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
党员个人对照检查材料
2014/10/01 职场文书
2015教师年度考核评语
2015/03/25 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL