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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
Vue路由权限控制解析
Nov 09 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
CodeIgniter CLI模式简介
2014/06/17 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
react redux入门示例
2018/04/19 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python下载网络小说实例代码
2018/02/03 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
百度JavaScript笔试题
2015/01/15 面试题
心理健康课教学反思
2014/02/13 职场文书
建议书标准格式
2014/03/12 职场文书
食品安全工作实施方案
2014/03/26 职场文书
先进党员事迹材料
2014/12/24 职场文书
中学生逃课检讨书
2015/02/17 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript