JQuery中queue方法用法示例

本文实例讲述了JQuery中queue方法用法。分享给大家供大家参考，具体如下：

jquery的queue方法

显示或操作在匹配元素上执行的函数队列

意思就是对匹配上的元素，显示作用在这个元素上的函数的个数，也就是上述所说的“显示”，而操作则是更改这些作用在该元素上的函数队列

举个例子：

<style>
 div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
 div.newcolor { background:blue; }
 span { color:red; }
</style>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>

$("#show").click(function () {
   var n = $("div").queue("fx");
   $("span").text("Queue length is: " + n.length);
});
function runIt() {//里面有一系列作用于div元素的函数，一共为8个（在没有执行$("div").slideUp("normal", runIt);这个语句的时候显示的结果是8个，每次执行完一个都会减少一个，但是当所有动作执行完又再次执行RUNIT（）的时候，结果就不是八而是十六了，很明显它把原本执行完的序列，原本应该为0的时候它却是8+8而不是0+8的结果显示），
//但如果你复制以上代码发现点击按钮是小于8，是因为你点击的时候动作已经开始执行，序列-1
   $("div").show("slow");
   $("div").animate({left:'+=200'},2000);
   $("div").slideToggle(1000);
   $("div").slideToggle("fast");
   $("div").animate({left:'-=200'},1500);
   $("div").hide("slow");
   $("div").show(1200);
   $("div").slideUp("normal", runIt);
}
runIt();

讨论的重点不是它重复执行RUNIT()的时候的序列长度，这个不管一般也用不上

而是如何用queue来操作函数序列

<style>
 div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
 div.newcolor { background:blue; }
</style>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>

$("#start").click(function () {
   $("div").show("slow");
   $("div").animate({left:'+=200'},5000);
   $("div").queue(function () {//创建一个匿名函数作为一个<动画>序列,忘记说明$("div").queue("fx")，默认参数是 fx, 标准的效果序列。当然你也可以将addclass这个操作自定义成一个动画效果也是可以的，现在这种写法，addclass也变成了一个效果函数，并成了序列的内容
     $(this).addClass("newcolor");
     $(this).dequeue();//插入自定义函数之后，如果还需要继续还行队列，则用dequeue(),如果不用这个函数，动画将停止，当然动画序列还是在的，这并不是意味着删除剩下的序列,这代码只能放自定义函数最后面，如果放在外面会有意料之外的效果，比如它不是按照播放完一个动画再执行自定义函数里面的内容，而是在上一个动画开始后立马就执行了，而放在自定义函数内部则不会出现这个问题。
   });
   $("div").animate({left:'-=200'},1500);
   $("div").queue(function () {
     $(this).removeClass("newcolor");
     $(this).dequeue();
   });
   $("div").slideUp();
 });
 $("#stop").click(function () {
   $("div").queue("fx", []);//stop是结束当前正在进行的动画，如果除了当前动画还有后续动画，则会立马执行下一个动画，而这一句是将序列用新的数组（这里是空数组）代替原本的序列，意味着，删除了剩下的所有动画序列，所以这里就能体现出queue的作用，它主要还是用来替换和删除动画效果，新增的话可以用其他代替
   $("div").stop();
 });

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • jquery队列函数用法实例

    本文实例讲述了jquery队列函数用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.9

  • jQuery 事件队列调整方法

    大家都发现,通过jQuery绑定事件是件非常容易的事情 复制代码 代码如下: <TEXTAREA class=javascript name=code rows=15 cols=50>$("a").click(function(){     console.info("A");     return false; }); </TEXTAREA> 但是A事件绑定后,我发现我需要B事件来决定其是否触发,好办,现在就改. 复制代码 代码如下: &l

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

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

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

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

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

  • 用队列模拟jquery的动画算法实例

    本文实例讲述了用队列模拟jquery的动画算法.分享给大家供大家参考.具体分析如下: Aaron最近疯狂的爱上了算法研究,估计又要死伤不少脑细胞了,我喜欢捡现成的,可以省些力气.发现他写的一段源码,运行一下,还蛮好玩的,于是拿来分析一下,一来吸收下里边的营养,二来加深一下源码学习的功力.话说这源码还真是提高js内功的一大秘决,不信,就和我一起来品味一下吧. 复制代码 代码如下: //立即执行函数,没有什么好说的.看下面演示 /** (function($){     //此处的$会由后面紧跟的立

  • jQuery使用动画队列自定义动画操作示例

    jQuery使用动画队列自定义动画操作示例

    本文实例讲述了jQuery使用动画队列自定义动画操作.分享给大家供大家参考,具体如下: jQuery的queue()方法和dequeue()方法配合使用,可以完成对函数队列的操作. 实现步骤: 1.新建一个函数数组,把动画函数依次放进去: 2.调用queue()方法将动画函数数组加入队列中: 3.利用dequeue()方法取出函数队列中的第一个函数,并执行它. 示例: <!DOCTYPE html> <html> <head> <title>jQueryQu

  • 利用Jquery队列实现根据输入数量显示的动画

    利用Jquery队列实现根据输入数量显示的动画

    先来看看要实现的效果图 如上面的gif图所示,可以在输入框中,输入要产生的动画的数量,然后点击click me按钮,就产生了效果.产生的效果是通过在数组中预设的几种.这里为了演示方便,没有设置具体的形状,比如可以更换为一些其它的iconfont来实现效果. 实现思路 通过$.queue和$.dequeue来实现动画队列的存取与取出实现效果.首先通过按照input输入的数字来形成对应数量效果对象的数组.然后在把数组存放到$.queue中,最后通过click me按钮触发,一个一个取出动画序列,实现

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

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

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

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

  • JQuery中queue方法用法示例

    本文实例讲述了JQuery中queue方法用法.分享给大家供大家参考,具体如下: jquery的queue方法 显示或操作在匹配元素上执行的函数队列 意思就是对匹配上的元素,显示作用在这个元素上的函数的个数,也就是上述所说的"显示",而操作则是更改这些作用在该元素上的函数队列 举个例子: <style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; back

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

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

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

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. animate()方法的使用: 方式一: 以"属性名/值"对象的方式定义动画终止样式属性.例如: 复制代码 代码如下: $("div").animate( {width:"1000px"}) 以上代码能够将div从原有的宽度调整到1000px.也可以一次性

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

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

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

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • jQuery中get方法用法分析

    本文实例讲述了jQuery中get方法用法.分享给大家供大家参考,具体如下: 参数:url,[data],[callback],[type] url 待载入页面的URL地址. data 待发送 Key/value 参数. callback 载入成功时回调函数. type 返回内容格式,xml, html, script, json, text, _default. 案例1 表单代码: <form id="form1" action="#"> <p&

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

    本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerHeight() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html

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

    本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>

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

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

随机推荐