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用noConflict代替$的实现方法
Apr 12 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery实现轮播图效果
Nov 26 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 Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php at(@)符号的用法简介
2009/07/11 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
Vue实现todo应用的示例
2021/02/20 Vue.js
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python 循环语句之 while,for语句详解
2018/04/23 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
营销总经理岗位职责范本
2014/09/02 职场文书
三潭印月的导游词
2015/02/12 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
python如何将mat文件转为png
2022/07/15 Python