jquery队列函数用法实例


Posted in Javascript onDecember 16, 2014

本文实例讲述了jquery队列函数用法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jquery-1.9.1.js"></script>

</head>

<body>

<style>

  div { margin:3px; width:40px; height:40px;

        position:absolute; left:0px; top:30px; 

        background:green; display:none; }

  div.newcolor { background:blue; }

  </style>

  Click here...

  <div></div>

<script>

$(document.body).click(function () {

      $("div").show("slow");

      //$("div").slideDown();

      $("div").animate({left:'+=200'},2000);

      $("div").queue(function () {//入队列

          $(this).addClass("newcolor");

          $(this).dequeue();//出队列

      });

      $("div").animate({left:'-=200'},2000);

      $("div").queue(function () {//入队列

          $(this).removeClass("newcolor");

          $(this).dequeue();//出队列

      });

      $("div").slideUp();

});

</script>

</body>

</html>

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

Javascript 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
js 代码优化点滴记录
Feb 19 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 #Javascript
jQuery实现数字加减效果汇总
Dec 16 #Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 #Javascript
浅谈Javascript变量作用域问题
Dec 16 #Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 #Javascript
javascript arguments使用示例
Dec 16 #Javascript
javascript实现日期格式转换
Dec 16 #Javascript
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
JavaScript 参考教程
2006/12/29 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
深入解析Python中的urllib2模块
2015/11/13 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Python 可视化神器Plotly详解
2020/12/26 Python
Python实现简单猜数字游戏
2021/02/03 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
毕业生文员求职信
2013/11/03 职场文书
银行职业规划书范文
2013/12/28 职场文书
产品质量保证书
2014/04/29 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
营销计划书
2015/01/17 职场文书
大学生年度个人总结
2015/02/15 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL