文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jQuery中队列queue()函数怎么使用

2023-07-04 09:53

关注

这篇“jQuery中队列queue()函数怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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);});

以上就是关于“jQuery中队列queue()函数怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯