jQuery使用动画队列自定义动画操作示例


Posted in jQuery onJune 16, 2018

本文实例讲述了jQuery使用动画队列自定义动画操作。分享给大家供大家参考,具体如下:

jQuery的queue()方法和dequeue()方法配合使用,可以完成对函数队列的操作。

实现步骤:

1、新建一个函数数组,把动画函数依次放进去;

2、调用queue()方法将动画函数数组加入队列中;

3、利用dequeue()方法取出函数队列中的第一个函数,并执行它。

示例:

<!DOCTYPE html>
<html>
 <head>
  <title>jQueryQueueTest.html</title>
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
  $().ready(function(){
  $(".flip").click(function(){//给flip类绑定click事件
  var _slideFun =[
  function(){
  $(".panel").slideUp(1200,_takeOne);
  },
  function(){
  $(".panel").fadeIn(1600,_takeOne);
  }
  ];//创建一个有2个函数的函数数组
  $(".panel").queue('slideList',_slideFun);//通过queue方法设置函数队列
  var _takeOne = function(){
  $(".panel").dequeue('slideList');
  };//定义一个事件处理程序,该程序的功能是:从函数队列最前端移除一个队列函数,获取队列中的下一个函数执行
  _takeOne();//执行函数队列中的下一个函数
  });
  });
  </script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text_align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
 </head>
 <body>
  <div class="panel">
  <p>动画队列效果</p>
  </div>
  <p class="flip">请点击这里</p>
 </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具: http://tools.3water.com/code/HtmlJsRun测试后,运行效果如下:

jQuery使用动画队列自定义动画操作示例

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

jQuery 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 #jQuery
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 #jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
You might like
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php生成二维码
2015/08/10 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python with的用法
2014/08/22 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python实现扫雷游戏的示例
2020/10/20 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
草莓网官网:StrawberryNET
2019/08/21 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
西式婚礼证婚词
2014/01/12 职场文书
春节晚会主持词
2014/03/24 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
森林防火宣传标语
2014/06/27 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
公司员工奖惩制度
2015/08/04 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL