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 相关文章推荐
jquery插件validate验证的小例子
May 08 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
简单实现node.js图片上传
Dec 18 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
Vue底层实现原理总结
Feb 17 Javascript
微信小程序实现弹出层效果
May 26 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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
php弹出对话框实现重定向代码
2014/01/23 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
arguments对象
2006/11/20 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
用Python实现随机森林算法的示例
2017/08/24 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python读取stdin方法实例
2019/05/24 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
高中军训感想300字
2014/03/04 职场文书
大专生找工作自荐书
2014/06/10 职场文书
禁毒宣传标语
2014/06/19 职场文书
实验室的标语
2014/06/20 职场文书
创先争优活动心得体会
2014/09/04 职场文书