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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
理解Javascript闭包
Nov 01 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
php显示页码分页类的封装
2017/06/08 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
jQuery操作事件完整实例分析
2020/01/10 jQuery
JS实现点星星消除小游戏
2020/03/24 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
windows下python连接oracle数据库
2017/06/07 Python
详解K-means算法在Python中的实现
2017/12/05 Python
python2.7安装图文教程
2018/03/13 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python判断无向图环是否存在的示例
2019/11/22 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
珍爱生命演讲稿
2014/05/10 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
办公用品管理制度
2015/08/04 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA