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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
浅谈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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
dedecms中使用php语句指南
2014/11/13 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
php 数据结构之链表队列
2017/10/17 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python的concat等多种用法详解
2018/11/28 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python实现人脸签到系统
2020/04/13 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
经典的班主任推荐信
2013/10/28 职场文书
React如何创建组件
2021/06/27 Javascript
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
python 使用pandas读取csv文件的方法
2022/12/24 Python