jQuery中使用animate自定义动画的方法


Posted in Javascript onMay 29, 2016

动画 animate()

01.animate()方法的简单使用

有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了。

操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别。

$(elem).fadeOut(3000) 
$(elem).animate({ 
opacity:0
},3000)

显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画。

语法:

1 .animate( properties [, duration ] [, easing ] [, complete ] )

2 .animate( properties, options )

.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用,几乎差不多了,唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了。

参数分解:

properties:一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以,因为参数是red或者GBG这样的值,非常用插件,否则正常情况下是不能只能动画效果的。注意,CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。

特别注意单位,属性值的单位像素(px),除非另有说明。单位em 和 %需要指定使用

.animate({
left: , 
width: 'px' 
opacity: 'show', 
fontSize: "em",
}, );

除了定义数值,每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

.animate({
width: "toggle"
});

如果提供一个以+= 或 -=开始的值,那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

.animate({ 
left: '+50px'
}, "slow");

duration:时间

动画执行的时间,持续时间是以毫秒为单位的;值越大表示动画执行的越慢,不是越快。还可以提供'fast' 和 'slow'字符串,分别表示持续时间为200 和 600毫秒。
easing动画运动的算法:

jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画,如果需要其他的动画算法,请查找相关的插件

complete回调

动画完成时执行的函数,这个可以保证当前动画确定完成后发会触发

02.animate() 方法来依次执行多个动画

animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过animate的提供第二种设置语法,传递一个对象参数,可以拿到动画执行状态一些通知。

.animate( properties, options )

options参数

duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数
step:规定每个动画的每一步完成之后要执行的函数
progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念
complete:动画完成回调

如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次

列出常用的方式

$('#elem').animate({
width: 'toggle', 
height: 'toggle'
}, {
duration: ,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});

调用animate()方法可以创建自定义动画效果,它的调用格式为:

$(selector).animate({params},speed,[callback])

其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。

例如,调用animate()方法以由小到大的动画效果显示图片,如下图所示:

<body>
<h>制作简单的动画效果</h>
<img src="images/.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$('img').animate({
width: 'px';
height:'px'
}, , function() {
$("#tip").html('执行完成!');
});
})
</script>
</body>

在浏览器中显示的效果:

jQuery中使用animate自定义动画的方法

从图中可以看出,调用animate()方法,以渐渐放大的动画效果显示图片元素,当动画执行完成后,通过回调函数在页面的<div>元素中显示“执行完成!”的字样。

Javascript 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
详解JS模块导入导出
Dec 20 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
javascript实现粘贴qq截图功能(clipboardData)
May 29 #Javascript
js剪切板应用clipboardData实例解析
May 29 #Javascript
js实现可控制左右方向的无缝滚动效果
May 29 #Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 #Javascript
js省市县三级联动效果实例
Apr 15 #Javascript
js实现精确到秒的倒计时效果
May 29 #Javascript
解读Bootstrap v4 sass设计
May 29 #Javascript
You might like
javascript 小型动画组件与实现代码
2010/06/02 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
AngularJS快速入门
2015/04/02 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
基于python plotly交互式图表大全
2019/12/07 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
2014年酒店工作总结范文
2014/11/17 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
员工年度工作总结2015
2015/05/18 职场文书
在校学生证明格式
2015/06/24 职场文书
青年志愿者活动感想
2015/08/07 职场文书