jQuery 动画与停止动画效果实例详解


Posted in jQuery onMay 19, 2020

本文实例讲述了jQuery 动画与停止动画效果。分享给大家供大家参考,具体如下:

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法:

$(selector).animate({params},speed,callback);
  • 必需的 params 参数定义形成动画的 CSS 属性。
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素:

$("button").click(function(){
 $("div").animate({left:'250px'});
});

jQuery animate() - 操作多个属性

请注意,生成动画的过程中可同时使用多个属性:

$("button").click(function(){
 $("div").animate({
  left:'250px',
  opacity:'0.5',
  height:'150px',
  width:'150px'
 });
});

lamp  可以用 animate() 方法来操作所有 CSS 属性吗?
 
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
 
同时,色彩动画并不包含在核心 jQuery 库中。
 
如果需要生成颜色动画,您需要从 jquery.com 下载 颜色动画 插件。

jQuery animate() - 使用相对值

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

$("button").click(function(){
 $("div").animate({
  left:'250px',
  height:'+=150px',
  width:'+=150px'
 });
});

jQuery animate() - 使用预定义的值

甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":

$("button").click(function(){
 $("div").animate({
  height:'toggle'
 });
});

jQuery animate() - 使用队列功能

默认地,jQuery 提供针对动画的队列功能。

这意味着如果在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

$("button").click(function(){
 var div=$("div");
 div.animate({height:'300px',opacity:'0.4'},"slow");
 div.animate({width:'300px',opacity:'0.8'},"slow");
 div.animate({height:'100px',opacity:'0.4'},"slow");
 div.animate({width:'100px',opacity:'0.8'},"slow");
});

下面的例子把 <div> 元素往右边移动了 100 像素,然后增加文本的字号:

$("button").click(function(){
 var div=$("div");
 div.animate({left:'100px'},"slow");
 div.animate({fontSize:'3em'},"slow");
});

jquery中有一个Queue队列的接口,这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的,Queue队列如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施

Queue队列

队列是一种特殊的线性表,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行出入操作(入队),队列的特点是先进先出,最先插入的元素最先被删除。

为什么要引入队列

var a = 1;
setTimeout(function(){
a=2;
},0)
alert(a);

我们一直习惯于线性的编写代码逻辑,但是在JavaScript编程几乎总是伴随着异步操作:

setTImeout,css3Transition/Animation,ajax,dom的绘制,postmessage,web Database 等等,大量异步操作所带来的回调函数会把我们的算法分解,对于“异步+回调”的模式,怎么“拉平”异步操作使之跟同步一样,因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑,所以就会出现 promises 约定了。

那么 jQuery 引入队列其实从一个角度上可以认为:允许一系列函数被异步地调用而不会阻塞程序。

看一个代码段:

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列,它的内部其实就是一组队列 Queue,所以队列和 Deferred 地位类似,是一个内部使用的基础设施。

  • 当 slideUp 运行时,fadeIn 被放到 fx 队列中
  • 当 slideUp 完成后,从队列中被取出运行

Queue 函数允许直接操作这个链式调用的行为,同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

jQuery 提供了 2 组队列操作的 API:

jQuery.queue/dequeue
jQuery.fn.queue/dequeue

但是不同与普通队列定义的是:

  • jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素,还会自动执行返回的队头元素
  • fn 是扩展在原型上的高级API是提供给实例使用的
  • .queue/.dequeue 其内部是调用的 .queue,.dequeue 静态的底层方法实现入列与出列

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);
  • 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
  • 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法,不带参数:

$("#stop").click(function(){
 $("#panel").stop();
});

动画队列停止动画测试,只停止当前正在进行的动画,停止当前动画后,队列中的下一个动画开始进行:

$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideDown(5000);
  $("#panel").slideUp(5000);
 });
 $("#stop").click(function(){
  $("#panel").stop();
 });
});

可以在 stop() 中设置 stopAll 的参数为 true,这样就可以停止所有动画效果而不是只停止当前动画:

$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideDown(5000);
  $("#panel").slideUp(5000);
 });
 $("#stop").click(function(){
  $("#panel").stop(true);
 });
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
JQuery表单元素取值赋值方法总结
May 12 #jQuery
You might like
php如何获取文件的扩展名
2015/10/28 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
javascript常用方法总结
2015/05/14 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
vue实现五子棋游戏
2020/05/28 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
python爬虫使用cookie登录详解
2017/12/27 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python随机数函数代码实例解析
2020/02/09 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
入学申请自荐信范文
2014/02/26 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
财务检查整改报告
2014/11/06 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年药房工作总结
2015/04/25 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫