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 28 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 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
图书管理程序(一)
2006/10/09 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
如何在PHP中读写文件
2020/09/07 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vue实现图书管理系统
2020/12/29 Vue.js
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Django中使用Celery的方法步骤
2020/12/07 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
国贸专业个人求职信范文
2014/01/08 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
招股说明书范本
2014/05/06 职场文书
读书之星事迹材料
2014/05/12 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
大学生村官入党自传
2015/06/26 职场文书
2016七夕情人节寄语
2015/12/04 职场文书