Qquery 队列动画 queue（） dequeue（） clearqueue（）

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="jquery-1.10.1.min.js"></script>

<style type="text/css">

.box{border:1px solid red;width:600px;height: 300px;margin:30px auto;position: relative;}

.box div{position: absolute;top:0;width:10px;height:10px;background:blueviolet;}

.l1{left:20px;}

.l2{left:70px;}

.l3{left:120px;}

.l4{left:170px;}

.l5{left:220px;}

.l6{left:270px;}

.l7{left:320px;}

</style>

</head>

<body>

<button>stop</button>

<div class="box">

<div class="l1"></div>

<div class="l2"></div>

<div class="l3"></div>

<div class="l4"></div>

<div class="l5"></div>

<div class="l6"></div>

</div>

<script type="text/javascript">

$(function(){

var FUNC = [//把所有动画都存到数组里面

function () { $(".l1").animate({ top: "570" }, aniCB); },

function () { $(".l2").animate({ top: "570" }, aniCB); },

function () { $(".l3").animate({ top: "570"  }, aniCB); },

function () { $(".l4").animate({ top: "570" }, aniCB); },

function () { $(".l5").animate({ top: "570"  }, aniCB); },

function () { $(".l6").animate({ top: "570"  }, aniCB); },

function () { alert("动画结束") }

];

$(document).queue("myAnimation", FUNC);//把动画数组赋值给$(document)下的myAnimation

var aniCB = function ()

{

$(document).dequeue("myAnimation");//用dequeue来执行下一个函数

};

$(".l1").animate({ top: "570" }, aniCB);//执行第一个定好，并且回调

$("button").click(function(){//点击清除队列

$(document).clearQueue(‘myAnimation‘);

})

});

</script>

</body>

</html>

时间： 2024-10-27 02:23:08

Qquery 队列动画 queue（） dequeue（） clearqueue（）的相关文章

jQuery 源码分析(十一) 队列模块 Queue详解

队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基础功能,负责存储动画函数.自动出队并执行动画函数,同时还要确保动画函数的顺序执行. jQuery的静态方法含有如下API: $.queue(elem,type,data) ;返回或修改匹配元素关联的队列,返回最新的队列,参数如下:   elem ;DOM元素或JavaScript对象 type  ;

queue(),dequeue()

这两个方法,一个是往里面添加队列,一个是执行队列 也是分静态方法和实例方法, 同样,实例方法最后调用静态方法 源码主要分析一下延迟delay方法,如何起作用的,写的有点仓促,先记录一下 在这里参照了网络上的文章,给推荐一下,介绍的很详细了,作者比较用心: http://www.html-js.com/card/1083,他是基于1.7的,我这边运行的是1.9的,但是核心思想是一样的 jQuery.extend({ queue: function( elem, type, data ) { var

C# 队列（Queue）

队列(Queue)代表了一个先进先出的对象集合. using System; using System.Collections; namespace CollectionsApplication { class Program { static void Main(string[] args) { Queue q = new Queue(); q.Enqueue('A'); q.Enqueue('M'); q.Enqueue('G'); q.Enqueue('W'); Console.Write

jQuery队列动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery队列动画</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

35. C# -- 队列（Queue）

队列(Queue)代表了一个先进先出的对象集合. using System; using System.Collections;   namespace CollectionsApplication {     class Program     {         static void Main(string[] args)         {             Queue q = new Queue();               q.Enqueue('A');          

顺序队列(Sequential Queue)

顺序队列(Sequential Queue) 1. 顺序队列的概念 1.1 顺序队列的定义 顺序队列是基于数组的存储表示实现的队列. 1.2 顺序队列中各元素的逻辑及存储关系 顺序队列可以采用顺序表作为其存储表示,因此,可以在顺序队列的声明中用顺序表定义它的存储空间. 顺序队列可以使用一维数组作为队列的存储空间,存放队列元素的数组的头指针为*elements,该数组的最大允许存放元素个数为maxSize,当前队列的队头位置由数组下标指针front指示,队尾位置由数组下标指针rear指示,如果队列

链式队列(Linked Queue)

链式队列(Linked Queue) 1. 链式队列的概念 1.1 链式队列的定义 链式队列是基于链表的存储表示实现的队列. 1.2 链式队列中各元素的逻辑及存储关系 链式队列可以采用单链表作为其存储表示,因此,可以在链式队列的声明中用单链表定义它的存储空间. 链式队列的队头指针指向单链表的第一个结点,队尾指针指向单链表的最后一个结点. 注:链式队列的队头元素存放在单链表的第一个结点内,若要从队列中退出一个元素,必须从单链表中删去第一个结点,而存放着新元素的结点应插在队列的队尾,即单链表的最后一

循环队列(Circular Queue)

循环队列(Circular Queue) 1. 循环队列的概念 1.1 循环队列的定义 为了能够充分地使用数组中的存储空间,克服"假溢出"现象,可以把数组的前端和后端连接起来,形成一个环形的表,即把存储队列元素的表从逻辑上看成一个环,成为循环队列(circular queue). 1.2 循环队列中各元素的逻辑及存储关系 循环队列的首尾相接,当队头指针front和队尾指针rear进到maxSize-1后,再前进一个位置就自动到0.这可以利用除法取余的运算(%)来实现. (1)队头指针进

第二十四篇 玩转数据结构——队列（Queue）

1.. 队列基础 队列也是一种线性结构: 相比数组,队列所对应的操作数是队列的子集: 队列只允许从一端(队尾)添加元素,从另一端(队首)取出元素: 队列的形象化描述如下图: 队列是一种先进先出(First In First Out)的数据结构: 2.. 队列的实现 任务目标如下: Queue<E> ·void enqueue(E) //入队 ·E dequeue() //出队 ·E getFront() //查看队首元素 ·int getSize() //查看队列中元素的个数 ·boolean