jQuery中关于如何使用animate自定义动画
动画 animate()
01.animate()方法的简单使用
有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就是强大的animate方法了。
操作一个元素执行3秒的淡入动画，对比下一下2组动画设置的区别。
$(elem).fadeOut()
$(elem).animate({
opacity:
},)
显而易见，animate方法更加灵活了，可以精确的控制样式属性从而执行动画。
语法：
.animate( properties [, duration ] [, easing ] [, complete ] )
.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: '50px'
opacity: 'show',
fontSize: "10em",
}, );
除了定义数值，每个属性能使用'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>
<h3>制作简单的动画效果</h3>
<img src="data:images/1.png" alt=""/>
<div id="tip"></div>
<script type="text/javascript">
$(function() {
$('img').animate({
width: '100px';
height:'100px'
}, , function() {
$("#tip").html('执行完成！');
});
})
</script>
</body>
在浏览器中显示的效果：
从图中可以看出，调用animate()方法，以渐渐放大的动画效果显示图片元素，当动画执行完成后，通过回调函数在页面的<div>元素中显示“执行完成!”的字样。
03.stop()停止动画
动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止。
语法：
.stop( [clearQueue ] [, jumpToEnd ] )
.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
stop还有几个可选的参数，简单来说可以这3种情况
1 .stop(); 停止当前动画，点击在暂停处继续开始。
2 .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。
3 .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。
简单的说：参考下面代码：
$("#aaron").animate({
height:
}, )
$("#aaron").animate({
width:
}, )
$("#aaron").animate({
opacity: 0.6
}, )
- stop()：只会停止第一个动画，第二个第三个继续。
- stop(true)：停止第一个、第二个和第三个动画。
- stop(true ture)：停止动画，直接跳到第一个动画的最终状态。
如果动画未完成停止了，那么动画完成时执行的回调函数是不会被调用的
jQuery中关于如何使用animate自定义动画的更多相关文章
- 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- Animate自定义动画
在jQuery中出了基本的动画之外,还有用户 可以自定义的函数,Animate() 用于创建自定义动画的函数. apI上指出: 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表 ...
- vue中使用transition和animate.css动画效果
一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 4.2 《锋利的jQuery》jQuery中的动画
问题:queue()方法? tip0: jquery从1.9版本以上就不支持toggle()方法. // $("#panel h5.head").toggle(function() ...
- python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
随机推荐
- c++ 上机实验题
c++语言俺是不会啦,但是朋友考试需要,那只能勉为其难的入门下做做考试题了. 以下就是具体的题目和答案: ----------------------------------------------- ...
- javamail中的 javax.mail.AuthenticationFailedException: failed to connect的解决
在163邮箱中开启POP3和SMTP服务,并设置客户端授权密码,用该密码登录.而不是用户的密码.
- 临时起异，要进入C++领域耍一个程序
没办法.两周之内可以搞定吧. 就一个SESSION 0的问题. 网上有类似源码,调一下应该就可以吧..保佑顺利. 基本语法都还记得,快N年啦... #include <iostream> ...
- jq页面提示或者页面牵引浏览--页面的指引向导插件
1.看看插件效果吧 2. html 文件 :index.html <!DOCTYPE html> <html lang="en"> <head> ...
- 1.3－动态路由协议EIGRP②
LAB3:Wildcard Mask in EIGRP (通过反掩码,控制运行EIGRP的接口的范围 作用:控制有哪些接口在运行EIGRP) ~~~~~~~~~~~~~~~~~ ...
- SQL 为SQL Server服务指定的凭据无效怎么办
如下所示,在安装SQL Server2008的时候,我随便输入了了账户名和密码,点击下一步没用 正确做法是:点击账户名右边的小三角,从下拉列表随便选一个("对所有SQL Server服务 ...
- python编程（基于twisted的client编程）
[ 声明:版权全部,欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] python的twisted比較有意思,既能够做server方面的编程,也能够做client方面 ...
- 软件project—思考项目开发那些事（一）
阅读文件夹: 1.背景 2.项目管理,质量.度量.进度 3.软件开发是一种设计活动而不是建筑活动 4.高速开发(简单的系统结构与复杂的业务模型) 5.技术人员的业务理解与产品经理的业务理解的终于业务模 ...
- Codesys——限定符的使用方法[来自Codesys的Help]
Qualifier for actions in SFC In order to configure in which way the actions should be associated to ...
- extern_c
(1) 使用extern和包含头文件来引用函数有什么区别呢?extern的引用方式比包含头文件要简洁得多!extern的使用方法是直截了当的,想引用哪个函数就用extern声明哪个函数.这大概是 ...