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中setInterval的用法总结
Nov 20 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
基于Vue插入视频的2种方法小结
Apr 02 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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
php4的session功能评述(二)
2006/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jQuery的三种$()
2009/12/30 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
玩转方法:call和apply
2014/05/08 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python实现k-means算法
2018/02/23 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
运动会广播稿400字
2014/01/25 职场文书
安全生产先进个人材料
2014/02/06 职场文书
运动会广播稿150字
2014/02/19 职场文书
实习生工作证明范本
2014/09/14 职场文书
2014年司机工作总结
2014/11/21 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python