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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
页面中js执行顺序
Nov 09 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
jQuery基础知识小结
Dec 22 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
vue的for循环使用方法
Feb 12 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 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学习之PHP运算符
2006/10/09 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
php 猴子摘桃的算法
2017/06/20 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
通过C++学习Python
2015/01/20 Python
Python魔术方法详解
2015/02/14 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
美容院经理岗位职责
2014/04/03 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书