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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 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
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
wordpress之js库集合研究介绍
2007/08/17 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Python 基础教程之str和repr的详解
2017/08/20 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
大班开学家长寄语
2014/04/04 职场文书
人事代理委托书
2014/09/27 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
新闻稿标题
2015/07/18 职场文书
早上好问候语大全
2015/11/10 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android