一、queue( [queueName ], newQueue ) 操作欲执行队列方法

第一个参数是队列名称,不写的话默认是fx

第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函数,用于向队列中添加新函数

dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function

如果只是轮流移动次数较少,可以使用animate的回调函数来做,一个动画放在另一个动画的回调里边

$("#block1").animate({left:"+=100"},function() {

    $("#block2").animate({left:"+=100"},function() {
        $("#block1").animate({left:"+=100"},function() {
            $("#block2").animate({left:"+=100"},function() {
                $("#block1").animate({left:"+=100"},function(){
                    alert("动画结束");
                });
            });
        });
    });
});

但这种方法当动画较多的时候简直是残忍,此时利用queue和dequeue则显得简单很多:

 

//js code

$(function(){

var FUNC = [

                        function () { $("#block1").animate({ left: "+=100" }, aniCB); },
                        function () { $("#block2").animate({ left: "+=100" }, aniCB); },
                        function () { $("#block1").animate({ left: "+=100" }, aniCB); },
                        function () { $("#block2").animate({ left: "+=100" }, aniCB); },
                        function () { $("#block1").animate({ left: "+=100" }, aniCB); },
                        function () { $("#block2").animate({ left: "+=100" }, aniCB); },
                        function () { alert("动画结束") }
                       ];
            $(document).queue("myAnimation", FUNC);
            var aniCB = function () {
                $(document).dequeue("myAnimation");
            }
            
            $("#block1").animate({ left: "+=100" }, aniCB);

});

//html code

body{position:relative;}

#block1{position:absolute; top:150px; width:100px; height:100px; background-color:green;}

    #block2{position:absolute; top:250px; width:100px; height:100px; background-color:red;}
    <div id="block1"></div>
    <div id="block2"></div>

注:

1,我首先建议建立了一个函数数组,里边是一些列需要依次执行的动画

2,然后我定义了一个回调函数,用dequeue方法用来执行队列中的下一个函数
3,接着把这个函数数组放到document上的myAnimation的队列中(可以选择任何元素,我只是为了方便而把这个队列放在document上)
4,最后我开始执行队列中的第一个函数

5,当不要要继续进行接下来动画的时候(比如用户点了某个按钮),只需要清空那个队列即可。而要增加更多则只需要加入队列即可:

//清空队列
$(document).queue("myAnimation",[]);
//加一个新的函数放在最后
$(document).queue("myAnimation",function(){alert("动画真的结束了!")});

这当然也可以用于ajax之类的方法,如果需要一系列ajax交互,每个ajax都希望在前一个结束之后开始,之前最原始的方法就是用回调函数,

但这样太麻烦了。同样利用queue添加队列,每次ajax之后的回调中执行一次dequeue即可。

二、这两个方法主要是为了取消动画

clearQueue( [queueName ] ) 将队列中函数清空

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在进行的动画

queue:正在进行的动画队列名称

clearQueue:默认值为false,是否将队列本身也清空

jumpToEnd:默认值为false,是否立即执行完动画

1.这样写不会不会终止动画,只是当前动画执行完后,不会再调用队列中下一个动画(队列被清空了嘛,没有下一个了)

$('#block1').clearQueue('myQueue');

2.立即停止动画
$('#block1').stop();   至于停止动画是暂停还是立即执行完,就学要配置stop()的参数了

												

js queue dequeue clearQueue stop的更多相关文章

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

    queue(name,[callback]):  当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name') 当有两 ...

  2. queue(),dequeue()

    这两个方法,一个是往里面添加队列,一个是执行队列 也是分静态方法和实例方法, 同样,实例方法最后调用静态方法 源码主要分析一下延迟delay方法,如何起作用的,写的有点仓促,先记录一下 在这里参照了网 ...

  3. jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

    .queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...

  4. jQuery源代码学习之七—队列模块queue

    一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程 ...

  5. jQuery源代码解析(3)—— ready载入、queue队列

    ready.queue放在一块写,没有特殊的意思,仅仅是相对来说它俩可能源代码是最简单的了.ready是在dom载入完毕后.以最高速度触发,非常实用. queue是队列.比方动画的顺序触发就是通过默认 ...

  6. jQuery笔记之animate中的queue

    队列 队列的执行顺序 queue() dequeue() 输出对象里面的内容 依次出队 不过这样写太麻烦了,因为每次都要输出,所以我们看下面的方法 运用到队列输出的 <!DOCTYPE html ...

  7. jQuery.queue源码分析

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 队列是一种特殊的线性表,它的特殊之处在于他只允许在头部进行删除,在尾部进行插入.常用来表示先进先出的操作(FI ...

  8. jquery源码学习之queue方法

    队列模块的代码结构 静态方法jQuery下有queue,dequeue,_queueHooks这三种方法:静态方法不建议直接在外部调用: 实例方法.queue,.dequeue,.clearQueue ...

  9. 发挥jQuery的威力

    发挥jQuery的威力 由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery ...

随机推荐

  1. asp.net(C#)利用QRCode生成二维码(续)-在二维码图片中心加Logo或图像

    <%@ WebHandler Language="C#" Class="GetQRCode" %> using System; using Syst ...

  2. c语言-链表VS数组

    数组和链表的区别   数组是将元素在内存中连续存放,由于每个元素占用内存相同,可以通过下标迅速访问数组中任何元素.但是如果要在数组中增加一个元素,需要移动大量元素,在内存中空出一个元素的空间,然后将要 ...

  3. eclipse或者myeclipse安装svn报错”unable to load default svn client”

    是svn版本低了的问题 subeclipse下载,直接百度site1.X                  X为你需要的版本 解压site1.X 将此窗口先放到一边 在eclipse的安装目录下的dr ...

  4. CMFCPropertyGridProperty SetValue 出错处理

    对CMFCPropertyGridProperty SetValue时容易报错,这种情况一般是Property和value的类型不匹配造成的. 在创建property的时候,指定了数据类型,如果set ...

  5. 获取android控件的高度

    问题 如何获取一个控件的长和高,相信很多朋友第一眼看见这个问题都会觉得很简单,直接在onCreate里面调用getWidth.getMeasuredWidth不就可以获得了吗,但是,事实上是并没有简单 ...

  6. python中的时间转换

    Python中的时间相关库有: datetime 和time. 主要形式有: datetime timestamp 相互转换: timestamp->datetime: dt = datetim ...

  7. 利用node构建本地服务

    利用node构建本地服务 首先安装下node.js,地址为https://nodejs.org/en/,然后安装npm. node.js的中文api地址http://nodeapi.ucdok.com ...

  8. python:爬虫

    模块: (1)url管理器:对url进行管理 (2)网页下载器(urllib2):将需要爬取的url指定的网页以字符串的形式下载下来 (3)网页解释器(BeautifulSoup):解析 利用urll ...

  9. 【Debian】非法关机后无法联网 connect: network is unreachable

    某一天,突然发现无法ssh登录虚拟机内的debian系统,一直认为是ssh的问题,然后无意间ping了ping百度,发现原来是debian系统没有联网....囧 首先,是虚拟机的网络设置检查. 打开V ...

  10. Office组件之Spire.XLS的DotNet操作

    Overview 在项目中,我们经常需要将程序中获得的大量数据导出到Excel表格中,打印报表:进一步,还可能生成其折线图,对数据的变化趋势进行分析,从而更好地开展项目工作. 最近,我发现了一个对于D ...