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 面向对象编程 function也是类
Sep 17 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
React 组件间的通信示例
Jun 14 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
Nest.js散列与加密实例详解
Feb 24 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
js中parseInt函数浅谈
2013/07/31 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
python字典基本操作实例分析
2015/07/11 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
软件测试面试题
2014/01/05 面试题
村官工作鉴定评语
2014/01/27 职场文书
社区庆八一活动方案
2014/02/02 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
党员公开承诺书
2014/03/25 职场文书
房产公证书范本
2014/04/10 职场文书
学校2014年度工作总结
2014/12/06 职场文书
李强为自己工作观后感
2015/06/11 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
团组织关系介绍信
2019/06/24 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL