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 相关文章推荐
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
移动端js图片查看器
Nov 17 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
基于Vue中的父子传值问题解决
Jul 27 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php图片上传存储源码并且可以预览
2011/08/26 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
解析php中的escape函数
2013/06/29 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python的动态重新封装的教程
2015/04/11 Python
Python实现基本线性数据结构
2016/08/22 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
Linux如何压缩可执行文件
2013/10/21 面试题
矫正人员思想汇报
2014/01/08 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
python基础之匿名函数详解
2021/04/21 Python
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android