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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
jQuery实现文档树效果
Feb 20 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
vue底部加载更多的实例代码
Jun 29 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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
公务员保密承诺书
2014/03/27 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
市场部岗位职责
2015/02/12 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
阿里云日志过滤器配置日志服务
2022/04/09 Servers
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js