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 ...
随机推荐
- Springboot源码分析
参考资料 https://www.cnblogs.com/lizongshen/p/9127999.html
- openstack windows2012r2 glance镜像制作
镜像实现: 密码注入 修改密码 根分区扩展 1.下载windows iso镜像 下载地址:http://imsdn.com/MSDN-1.html 例如:cn_windows_server_2012_ ...
- MongoDB怎么快速的删除数据库数据？
我的mongodb里有10+数据库.现在需要重置这个环境,得到干净的没有数据的MongoDB.怎么快速安全的删除这些数据库数据呢? 记得首先备份你的数据库mongodump -o bakfolder ...
- 14、Java并发性和多线程-Java ThreadLocal
以下内容转自http://ifeve.com/java-theadlocal/: Java中的ThreadLocal类可以让你创建的变量只被同一个线程进行读和写操作.因此,尽管有两个线程同时执行一段相 ...
- Java 实现代理(Proxy)模式
类图 /** * 游戏者接口 * @author stone * */ public interface IGamePlayer { // 登录游戏 public void login(String ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第12章节--SP 2013中远程Event Receivers
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第12章节--SP 2013中远程Event Receivers 本章中,你讲学到: 了解远程evernt ...
- 基于FPGA的简易数字时钟
基于FPGA的可显示数字时钟,设计思路为自底向上,包含三个子模块:时钟模块,进制转换模块.led显示模块.所用到的FPGA晶振频率为50Mhz,首先利用它得到1hz的时钟然后然后得到时钟模块.把时钟模 ...
- 金典 SQL笔记(6)
page223-索引 --利用SQL 语句创建索引 --CREATE INDEX 索引名称on 表名(字段 ,字段, 字段字段n) --索引名称必须为唯一的,字段 ,字段, 同意一个到多个 --范例为 ...
- jquery 实现可编辑div
html大致例如以下: <ol id="ol_group" class="list-group list_of_items"> <li cla ...
- oc71--NSArray2
// // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject - (void)say; - ( ...