一、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. sql server2008 字段类型

    bit    整型 bit数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或False .On 或Off. 注意:很省空间的一种数据类型, ...

  2. kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

    kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

  3. 执行超过1个小时的SQL语句

    SELECT MO.MO_ID, MO.ITEM, MO.QTYORDERED, MO.PLANNEDSTARTDATE, BR.MAXLOTSIZE FROM TEMP_MO MO, (SELECT ...

  4. Angularjs学习笔记(四)----与后端服务器通信

    一.使用$http进行XHR和JSONP请求 1.1 XHR请求 GET:$http.get(url,config) POST:$http.post(url,data,config) PUT:$htt ...

  5. 干货|宏巍软件之Java线程监控之旅

    宏巍软件 许向 大家好,我是上海宏巍信息技术有限公司(简称:宏巍软件)的许向,宏巍软件成立于2005年,是一家以电商ERP软件开发为主的高新技术科技型软件公司,致力于为大型网商和电子商务企业提供专业. ...

  6. C# 解析JSON格式数据

    JSON简介 JSON(全称为JavaScript ObjectNotation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集.JSON采用完全独立于语言的文本格式,可 ...

  7. camstar --设备保养

  8. 使用date类和format类对系统当前时间进行格式化显示

    一:Date------------String 代码1:(代码二对显示出来的时间格式进行优化) package DateDemo; import java.text.SimpleDateFormat ...

  9. [刘阳Java]_JVM工作流程_第4讲

    程序员写好一段Java源程序-->编译-->字节码-->JVM-->硬件平台(操作系统)

  10. nexus 搭建maven本地仓库

    使用Nexus搭建Maven本地仓库   阅读目录 序 Nexus 序 在工作中可能存在有些开发机器不能上网,大量的机器获取jar包会导致公司网络很慢,还有时候公司会自己发布自己的项目版本,其他的项目 ...