jQuery中queue()方法用法实例


Posted in Javascript onDecember 29, 2014

本文实例讲述了jQuery中queue()方法用法。分享给大家供大家参考。具体分析如下:

此方法能够显示或者操作在匹配元素上执行的函数队列。

此方法可能用的并不是太频繁,但是却非常的重要,下面就结合实例来介绍一下次方法的用法。
根据方法参数的不同,作用也有所不同。
说明:建议结合dequeue()函数一起学习。
语法结构一:

$("selector").queue(queueName)

参数列表:

参数 描述
queueName 可选。 第一个匹配元素上动画队列的名称,默认值是“fx”。

没有参数的时候,能够返回第一个匹配元素上的动画队列。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>queue()函数-三水点靠木</title> 

<style type="text/css">

.box{

  width:300px;

  height:150px;

}

.mytest{

  width:50px;

  height:50px;

  background-color:green;

  position:absolute; 

  left:0px;

  display:none;

  font-size:12px;

}  

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#do").click(function(){

    $(".mytest").show(1000);

    $(".mytest").animate({left:"+=200"},3000);

    $(".mytest").animate({top:"+=50"},2000);

    $(".mytest").text("动画完成");

  })

  $("#count").click(function(){

    alert($(".mytest").queue().length)

  })

})

</script>

</head>

<body>

  <div class="box">

    <div class="mytest"></div>

  </div>

  <button id="do">点击开始动画</button>

  <button id="count">计算队列中函数数量</button>

</body>

</html>

由于queue()函数没有参数,所以返回值是第一个匹配元素上的动画队列,也就是div元素的动画队列,当点击第二个按钮的时候能够实时的计算出当前队列中的动画个数。
语法二:

$("selector").queue(callback())

可以为匹配元素的函数队列最后面添加一个函数。

参数列表:

参数 描述
callback() 匹配元素上的函数队列最后面要添加的函数。

在语法一的实例中,大家可能注意到一个问题,那就是我们希望在所有的动画都完成之后,再在div中添加“动画完成”四个字,但是从运行的实际表现来看,并非如此,这主要的原因是,show()和animate()动画函数会默认的添加到fx动画队列中,而text()方法并非动画函数,所以不会加入到fx队列,并且会首先执行。那么可以通过使用此函数,将text()方法入队。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>queue()函数-三水点靠木</title> 

<style type="text/css">

.box{

  width:300px;

  height:150px;

}

.mytest{

  width:50px;

  height:50px;

  background-color:green;

  position:absolute; 

  left:0px;

  display:none;

  font-size:12px;

}  

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#do").click(function(){

    $(".mytest").show(1000);

    $(".mytest").animate({left:"+=200"},3000);

    $(".mytest").animate({top:"+=50"},2000);

    $(".mytest").queue(function(){$(this).text("动画完成")});

  })

  $("#count").click(function(){

    alert($(".mytest").queue().length)

  })

})

</script>

</head>

<body>

<div class="box">

  <div class="mytest"></div>

</div>

<button id="do">点击开始动画</button>

<button id="count">计算队列中函数数量</button>

</body>

</html>

以上代码实现了我们最终需要效果。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>queue()函数-三水点靠木</title> 

<style type="text/css">

.box{

  width:300px;

  height:150px;

}

.mytest{

  width:50px;

  height:50px;

  background-color:green;

  position:absolute; 

  left:0px;

  display:none;

  font-size:12px;

}  

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#do").click(function(){

    $(".mytest").show(1000);

    $(".mytest").animate({left:"+=200"},3000);

    $(".mytest").animate({top:"+=50"},2000);

    $(".mytest").queue(function(){

      $(this).text("动画还将持续");

    });

    $(".mytest").animate({left:"-=200"},3000);

  })

  $("#count").click(function(){

    alert($(".mytest").queue().length)

  })

})

</script>

</head>

<body>

<div class="box">

  <div class="mytest"></div>

</div>

<button id="do">点击开始动画</button>

<button id="count">计算队列中函数数量</button>

</body>

</html>

以上代码中,我们想在执行完text()方法之后再执行一个自定义动画,但是表现却并非如此,最后面的自定义动画并没有执行。
代码修改如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>queue()函数-三水点靠木</title> 

<style type="text/css">

.box{

  width:300px;

  height:150px;

}

.mytest{

  width:50px;

  height:50px;

  background-color:green;

  position:absolute; 

  left:0px;

  display:none;

  font-size:12px;

}  

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#do").click(function(){

    $(".mytest").show(1000);

    $(".mytest").animate({left:"+=200"},3000);

    $(".mytest").animate({top:"+=50"},2000);

    $(".mytest").queue(function(){

      $(this).text("动画还将持续");

      $(this).dequeue();

    });

    $(".mytest").animate({left:"-=200"},3000);

  })

  $("#count").click(function(){

    alert($(".mytest").queue().length)

  })

})

</script>

</head>

<body>

<div class="box">

  <div class="mytest"></div>

</div>

<button id="do">点击开始动画</button>

<button id="count">计算队列中函数数量</button>

</body>

</html>

以上代码实现了我们的要求,在代码中添加:

$(this).dequeue();

也就是说通过queue()添加函数时,我们应当确保最终调用了 .dequeue(),这样下一个排队的函数才能够得到执行。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
全面解析bootstrap格子布局
May 22 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
浅谈JavaScript function函数种类
Dec 29 #Javascript
JavaScript异步加载浅析
Dec 28 #Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 #Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 #Javascript
JavaScript设计模式之单件模式介绍
Dec 28 #Javascript
理解javascript回调函数
Dec 28 #Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 #Javascript
You might like
PHP操作文件方法问答
2007/03/16 PHP
php 将excel导入mysql
2009/11/09 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
yii添删改查实例
2015/11/16 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
angularjs实现天气预报功能
2020/06/16 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
layui的select联动实现代码
2019/09/28 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python 线程池用法简单示例
2019/10/02 Python
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
学校消防安全制度
2014/01/30 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers