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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
JavaScript数组复制详解
Feb 02 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
python进程和线程用法知识点总结
2019/05/28 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
个人总结与自我评价
2015/02/14 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python