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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
微信小程序实现简单购物车功能
Dec 30 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
1 Tube Radio
2021/03/02 无线电
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP attributes()函数讲解
2019/02/03 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
javascript编写简易计算器
2017/05/06 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
vue3.0 上手体验
2020/09/21 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python 自动去除空行的实例
2018/07/24 Python
Python底层封装实现方法详解
2020/01/22 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
七匹狼男装广告词
2014/03/21 职场文书
家长通知书教师评语
2014/04/17 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
网络管理员岗位职责
2015/02/12 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
设备技术员岗位职责
2015/04/11 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
Redis+AOP+自定义注解实现限流
2022/06/28 Redis
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis