jQuery中dequeue()方法用法实例

本文实例讲述了jQuery中dequeue()方法用法。分享给大家供大家参考。具体分析如下：

此函数能够从队列最前端移除一个队列函数，并执行它。
建议和queue()函数一起学习。

语法结构:


代码如下:

$(selector).dequeue(queueName)

参数列表:

参数 描述
queueName 可选。队列的名称。
默认是 "fx"，动画队列。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>dequeue()函数-我们</title>
<style type="text/css">
div
{
  margin:3px;
  width:50px;
  position:absolute;
  height:50px;
  left:10px;
  top:30px;
  background-color:yellow;
}
div.red
{
  background-color:red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function (){
    $("div").animate({left:'+=200px'}, 2000);
    $("div").animate({top:'0px'}, 600);
    $("div").queue(function(){
      $(this).toggleClass("red");
      $(this).dequeue();
    });
    $("div").animate({left:'10px', top:'30px'}, 700);
  });
})
</script>
</head>
<body>
  <button>开始</button>
  <div></div>
</body>
</html>

注意:运行编辑器之后，再按F5刷新网页即可查看演示。

在以上代码中，dequeue()函数可以在执行完$(this).toggleClass("red")之后，将会从队列最前端移除$("div").animate({left:'10px', top:'30px'}, 700)，也就是执行此animate动画。

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

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

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

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

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

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

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

  • jQuery AjaxQueue改进步骤

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

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

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

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

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

  • 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-

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

    本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

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

    本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

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

    本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码 代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta char

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

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

随机推荐