jQuery中队列queue()函数的实例教程

如果当前jQuery对象匹配多个元素：获取队列时，只获取第一个匹配元素上的队列；设置队列(替换队列、追加函数)时，则为每个匹配元素都分别进行设置。
该函数属于jQuery对象(实例)。如果需要移除并执行队列中的第一个函数，请使用dequeue()函数。你也可以使用clearQueue()函数清空指定的队列。

语法
jQuery 1.2 新增该函数。queue()函数具有如下两种用法：

用法一：

jQueryObject.queue( [ queueName ] [, newQueue ] )

如果没有指定任何参数或只指定了queueName参数，则表示获取指定名称的函数队列。如果指定了newQueue参数，则表示使用新的队列newQueue设置(替换)当前队列中的所有内容。

用法二：

jQueryObject.queue( [ queueName ,] callback )

将指定的函数添加到指定的队列(末尾)。
注意：queue()函数的所有设置操作针对当前jQuery对象所匹配的每一个元素；所有读取操作只针对第一个匹配的元素。

参数
请根据前面语法部分所定义的参数名称查找对应的参数。
queueName：可选/String类型指定的队列名称，默认为"fx"(表示jQuery中的标准动画效果队列)。
newQueue：可选/Array类型用于替换当前队列内容的新队列。
callback：Function类型指定的函数，将会追加到队列中。该函数有一个函数参数，调用该参数可以移除并执行队列中的第一个函数。

返回值
queue()函数的返回值是Array/jQuery类型，返回值的类型取决于当前queue()函数执行的是获取操作还是设置操作。
如果queue()函数执行的是设置操作(替换队列、追加函数)，则返回当前jQuery对象本身；如果是获取操作，则返回获取到的函数队列(数组)。
如果当前jQuery对象匹配多个元素，读取数据时，queue()函数只以其中第一个匹配的元素为准。

实例：
1. jQuery为我们提供了queue()函数，来把你需要的某些代码插入到某个队列中

$('#test-change1').toggle(function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-goal1'));
    next();
  }).show('slow');

},function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-origin1'));
    next();
  }).show('slow');
});

2. 自定义队列

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
});

但就这段代码而已，待你真正添加进网页，并且尝试运行，会发现并非“所见即所得”，压根就不会有任何效果。

修改后：

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
})
.dequeue("custom"); //this is the key

一般对与dequeue()的定义是“删除队列中最顶部的函数，并且执行它”。我并不赞同用“删除”这个字眼，而是倾向于“取出”，其实这个函数的功能就好像是一个数据结构中队列的指针，待队列中前一个函数执行完后，取下一个队列最顶端的函数。

3. queue: false

$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
  $(this).animate({opacity: 0},
    {duration: 1000, queue: false});
  next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})

前1000毫秒，只有控制高度的“fx”队列执行，而后1000毫秒，控制不透明度的“fader”队列和控制高度的“fx”并行。这里的并行就是queue:false

$('#section3a').slideUp(1000)
      .slideDown(1000)
      .animate({width: '50px'}, {duration: 1000, queue: false});

4. 获取队列长度
比如用队列名取得匹配元素的长度：

var $queue=$("div").queue('fx');

很明显，就是取得队列名为'fx'的队列，如果想取得长度的话：

var $length=$('div').queue('fx').length;

注意这里的队列长度只是匹配元素还未运行的队列长度，当动画运行完之后，队列长度会自动归为0

5.替换队列

$('div').queue('fx',function(){
    $('div').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定义fx
$('div').queue('fx2',function(){
    $('div').slideDown('fast')
         .slideUp('fast')
         .animate({left:'+=100'},1000);
});//定义fx2

这里定义了两个队列，一个是慢队列,也就是默认的'fx',另一个是快队列'fx2'

当点击某个按钮时：

$('input').click(function(){
  $('div').queue('fx',fx2);
});
赞 (0)

相关推荐

  • jQuery中queue()方法用法实例

    本文实例讲述了jQuery中queue()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够显示或者操作在匹配元素上执行的函数队列. 此方法可能用的并不是太频繁,但是却非常的重要,下面就结合实例来介绍一下次方法的用法. 根据方法参数的不同,作用也有所不同. 说明:建议结合dequeue()函数一起学习. 语法结构一: 复制代码 代码如下: $("selector").queue(queueName) 参数列表: 参数 描述 queueName 可选. 第一个匹配元素上动画队列的

  • jquery队列queue与原生模仿其实现方法分享

    queue() 方法显示或操作在匹配元素上执行的函数队列. queue和dequeue的过程主要是: 用queue把函数加入队列(通常是函数数组)用dequeue将函数数组中的第一个函数取出,并执行(用shift()方法取出并执行)也就意味着当再次执行dequeue的时候,得到的是另一个函数了.同时也意味着,如果不执行dequeue,那么队列中的下一个函数永远不会执行. 对于一个元素上执行animate方法加动画,jQuery内部也会将其加入名为 fx 的函数队列.而对于多个元素要依次执行动画,

  • jQuery 源码分析笔记(7) Queue

    每个Element可以拥有多个队列,但是基本上都只使用到一个,即默认的fn队列.队列允许一系列函数被异步地调用而不会阻塞程序.例如:$("#foo").slideUp().fadeIn();其实这个就是我们大家常用的链式调用,实际上这是一个Queue.所以队列和Deferred地位类似,是一个内部使用的基础设施.当slideUp运行时,fadeIn被放到fx队列中,当slideUp完成后,从队列中被取出运行.queue函数允许直接操作这个链式调用的行为.同时,queue可以指定队列名称

  • jQuery中clearQueue()方法用法实例

    本文实例讲述了jQuery中clearQueue()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够清空对象上尚未执行的所有队列. 如果不带参数,则默认清空的是动画队列.这跟stop(true)类似,但stop()只能清空动画队列,而这个可以清空所有通过queue()创建的队列. 语法结构: 复制代码 代码如下: $(selector).clearQueue(queueName) 参数列表: 参数 描述 queueName 可选.定义要停止的队列的名称. 默认是 "fx",动

  • jQuery中dequeue()方法用法实例

    本文实例讲述了jQuery中dequeue()方法用法.分享给大家供大家参考.具体分析如下: 此函数能够从队列最前端移除一个队列函数,并执行它. 建议和queue()函数一起学习. 语法结构: 复制代码 代码如下: $(selector).dequeue(queueName) 参数列表: 参数 描述 queueName 可选.队列的名称. 默认是 "fx",动画队列. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <hea

  • jQuery队列控制方法详解queue()/dequeue()/clearQueue()

    jQuery队列控制方法详解queue()/dequeue()/clearQueue()

    先解释一下这组方法各自的含义. queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO. dequeue(na

  • jQuery AjaxQueue改进步骤

    假期里没事就想着改进下,改得地方不多,主要有以下三点: complete回调在jquery1.5以后可以是一个函数数组,按数组顺序调用. 如果前一个请求未返回,新的请求发出,那么撤销前一个请求,也就是新的请求"覆盖"原请求. 写成面向对象的形式,再用一个AjaxManage进行简单的管理. 代码如下,详细可看注释: 复制代码 代码如下: ;(function($) { // override:新的请求是否要覆盖之前的请求 function AjaxQueue(override) { t

  • jQuery中队列queue()函数的实例教程

    如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列:设置队列(替换队列.追加函数)时,则为每个匹配元素都分别进行设置. 该函数属于jQuery对象(实例).如果需要移除并执行队列中的第一个函数,请使用dequeue()函数.你也可以使用clearQueue()函数清空指定的队列. 语法 jQuery 1.2 新增该函数.queue()函数具有如下两种用法: 用法一: jQueryObject.queue( [ queueName ] [, newQueue ] ) 如

  • C++中队列queue的用法实例详解

    目录 一.定义 一.queue初始化 二.queue常用函数 补充:queue 的基本操作举例如下 总结 一.定义 queue是一种容器转换器模板,调用#include< queue>即可使用队列类. 一.queue初始化 queue<Type, Container> (<数据类型,容器类型>) 初始化时必须要有数据类型,容器可省略,省略时则默认为deque 类型 初始化示例 1: queue<int>q1; queue<double>q2; q

  • Java中队列Queue和Deque的区别与代码实例

    目录 一.Queue和Deque 二.api对比 三.代码实例 1.queue 2.deque 总结 一.Queue和Deque Queue以及Deque都是继承于Collection,Deque是Queue的子接口. Queue是FIFO的单向队列,Deque是双向队列. Queue有一个直接子类PriorityQueue,而Deque中直接子类有两个:LinkedList以及ArrayDeque. PriorityQueue的底层数据结构是数组,而无边界的形容,那么指明了PriorityQu

  • 在windows中追加/删除虚拟打印机实例教程

    由于项目需要在windwos系统中添加多台虚拟打印机(能够正常打印出纸),查找了一下系统函数. 使用 rundll32 printui.dll,PrintUIEntry,在CMD中运行,在弹出框中得到以下提示. 用法: rundll32 printui.dll,PrintUIEntry [options] [@commandfile] /a[file] 二进制文件名 /b[name] 基本打印机名 /c[name] 如果操作在远程机器上,unc 机器名 /dl 删除本地打印机 /dn 删除网络打

  • jQuery中$.grep() 过滤函数 数组过滤

    <pre code_snippet_id="1998964" snippet_file_name="blog_20161122_1_1873395" name="code" class="html">var = $.grep([1,32,5,63,8,4,-8,-5,2,56,9,62,-6],function (n , i){ if(n>50){ return n; } }); console.log(te

  • jQuery中实现prop()函数控制多选框(全选,反选)

    今天看了jQuery手册,对prop()函数又多了一点认识,记忆力不好,记录下来. prop() : 获取匹配元素集中第一个元素的值 判断checkbox中的第一个是否被选中: $(":checkbox").prop("checked"); //如果第一个checkbox被选中返回true,否则返回false. 禁用和选中页面上的所有复选框: $("input[type='checkbox']").prop("disabled"

  • C语言中实现itoa函数的实例

    C语言中实现itoa函数的实例 一.原型: char *itoa( int value, char *string,int radix); 二.函数说明: value:欲转换的数据. string:目标字符串的地址. radix:转换后的进制数,可以是10进制.16进制等. 三.函数简单实现: #include <iostream> #include <string> using namespace std; char* My_itoa(int value,char str[],i

  • Flutter中嵌入Android 原生TextView实例教程

    前言 本篇文章 中写到的是 flutter 调用了Android 原生的 TextView 案例 添加原生组件的流程基本上可以描述为: 1 android 端实现原生组件PlatformView提供原生view 2 android 端创建PlatformViewFactory用于生成PlatformView 3 android 端创建FlutterPlugin用于注册原生组件 4 flutter 平台嵌入 原生view 1 创建原生组件 创建在fLutter工程时会生成几个文件夹,lib是放fl

  • React中使用setInterval函数的实例

    本文是基于Windows 10系统环境,学习和使用React:Windows 10 一.setInterval函数 (1) 定义 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. (2) 实例 import React, { Component } fr

  • jQuery插件formValidator自定义函数扩展功能实例详解

    本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法.分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考<jQuery formValidator表单验证插件>以及本站其他相关文档 此处省略若干文字. 实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处.废话不多说,直接实例. 例一:座机和手机,至少

随机推荐