Jquery 自定义动画概述及示例


Posted in Javascript onMarch 29, 2013

animate(params, options) 返回值:jQuery
概述
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

参数
paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
optionsOptions
一组包含动画选项的值的集合。

选项
durationString,Number
(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easingString
(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
completeFunction
在动画完成时执行的函数
stepCallback
queueBoolean
(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

示例
描述:
第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。
HTML 代码:

<button id="go1">» Animate Block1</button> 
<button id="go2">» Animate Block2</button> 
<div id="block1">Block1</div><div id="block2">Block2</div>jQuery 代码: 
$("#go1").click(function(){ 
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) 
.animate( { fontSize: '10em' } , 1000 ) 
.animate( { borderWidth: 5 }, 1000); 
}); 
$("#go2").click(function(){ 
$("#block2").animate( { width: "90%"}, 1000 ) 
.animate( { fontSize: '10em' } , 1000 ) 
.animate( { borderWidth: 5 }, 1000); 
});

描述:
第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.
HTML 代码:
<button id="go1">» Animate Block1</button> 
<button id="go2">» Animate Block2</button> 
<div id="block1">Block1</div><div id="block2">Block2</div>jQuery 代码: 
$("#go1").click(function(){ 
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) 
.animate( { fontSize: '10em' } , 1000 ) 
.animate( { borderWidth: 5 }, 1000); 
}); 
$("#go2").click(function(){ 
$("#block2").animate( { width: "90%"}, 1000 ) 
.animate( { fontSize: '10em' } , 1000 ) 
.animate( { borderWidth: 5 }, 1000); 
});

描述:
用600毫秒切换段落的高度和透明度
jQuery 代码:
$("p").animate({ 
height: 'toggle', opacity: 'toggle' 
}, { duration: "slow" });

描述:
用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)
jQuery 代码:
$("p").animate({ 
left: 50, opacity: 'show' 
}, { duration: 500 });

描述:
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。
jQuery 代码:
$("p").animate({ 
opacity: 'show' 
}, { duration: "slow", easing: "easein" });
Javascript 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 #Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 #Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 #Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 #Javascript
JS 跳转页面延迟2种方法
Mar 29 #Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 #Javascript
javascript重写alert方法的实例代码
Mar 29 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
python 实现A*算法的示例代码
2018/08/13 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python timeit模块原理及使用方法
2020/10/10 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
2014年环保工作总结
2014/11/26 职场文书
党员活动总结
2015/02/04 职场文书