queue方法

摘自W3C school手册，用于简单理解使用queue方法

队列

每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中，只使用一个队列（名为 fx）。队列运行在元素上异步地调用动作序列，而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如：div元素有两个动画队列，当这条语句执行时，元素会立即开始其滑动动画，但是淡入过渡被置于 fx 队列，只有当滑动过渡完成后才会被调用

$('div').slideUp().fadeIn();

queue方法

　　queue（queueName，callback()）

　　　　queueName:队列名，字符串形式， 默认是 fx

　　　　callback(): 允许我们在队列末端增加一个新函数，这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数。

例子一：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		div {

			position: absolute;

			left: 100px;

			top: 100px;

			width: 100px;

			height: 100px;

			background-color: hotpink;

		}

	</style>

</head>

<body>

<div></div>

<script src = 'js/jquery-2.2.0.min.js'></script>

<script>

	var div = $("div");

	//给div添加多个队列函数

	function runIt() {

	  div.show(1000);

	  div.slideDown(1000);

	  div.hide(1000);

	  div.slideUp(1000, runIt);

	}

	//显示div元素当前队列有几个函数要执行

	setInterval(function(){

	  var n = div.queue("fx");

	  console.log( n.length);

	},100)

	runIt();

</script>

</body>

</html>

　结果显示div元素当前队列有几个函数要执行，4,3,2,1,4,3,2,1......

　

　例子二：

　　queue（queueName，callback()）：允许我们在队列末端放置一个新函数。这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数

　　.dequeue()：执行当前队列的第一个函数

//新增一个jqueue方法jqcss，queue（fn）能够把这个fn添加到当前对象的队列中去，并且fn某些程度上被当做动画类函数

$.fn.extend({

    jqcss: function(jsonCss){

	return $(this).queue(function(){

			$(this).css(jsonCss).dequeue();

		})

	}

});

	// $.fn.jqcss = function (Jsoncss){

	// 	return $(this).queue(function(){

	// 		$(this).css(Jsoncss).dequeue();

	// 	})

	// };

比如delay需要在两个动画类函数中间使用，我用queue添加一个函数fn，delay就能使用了，达到第一个特效延迟3s后播放第二个特效

		$('#main>li').each(function(i){

			$(this).css({

			//把前面所有的transform样式覆盖了

				'transform': 'rotateY('+i*10+'deg)'

			}).delay(3000).jqcss({

					'transform': 'rotateY('+i*10+'deg) translateY('+(firstY+i*16)+'px) translateZ(1000px)'

			})

		})

　　

　　

　　

　

　

CSS-03 queue方法的更多相关文章

  1. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  2. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  3. CSS居中的方法整合--水平居中

    原文 CSS的居中问题,是一个老生常谈的问题,各种居中方法层出不穷.是水平居中还是垂直居中?是block还是inline? 居中对象是一个还是多个?长度宽度是否确定?等等各种因素确定. 这里就从这些方 ...

  4. 在HTML页面中加载js文件和css文件的方法

    1.在HTML页面加载js文件的方法: function loadScriptFile(filePath){ var script = document.createElement("scr ...

  5. 还在手动给css加前缀？no！几种自动处理css前缀的方法简介

    原文首发于个人博客:还在手动给css加前缀?no!几种自动处理css前缀的方法简介 我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容.移动端还好,基本只要 ...

  6. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  7. 重温JavaScript获取CSS样式的方法（兼容各浏览器）

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  8. jquery源码解析：jQuery队列操作queue方法实现的原理

    我们先来看一下jQuery中有关队列操作的方法集: 从上图可以看出,既有静态方法,又有实例方法.queue方法,相当于数组中的push操作.dequeue相当于数组的shift操作.举个例子: fun ...

  9. CSS兼容性解决方法!important的IE7，Firefox问题

    转自:http://www.codesky.net/article/201008/139903.html 1. 首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4 ...

随机推荐

  1. 【学习】006数据交换格式与SpringIOC底层实现

    课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...

  2. Oracle Internals Notes Redo Write Triggers

    There are four conditions that cause LGWR to perform a redo write. When LGWR is idle, it sleeps on a ...

  3. Sublime-Text macOS 编译运行armadillo

    { "cmd" : ["g++ -std=c++14 -Wall -larmadillo -framework Accelerate ${file_name} -o ${ ...

  4. flume(2)

    接续上一篇:https://www.cnblogs.com/metianzing/p/9511852.html 这里也是主要记录配置文件. 以上一篇案例五为基础,考虑到日志服务器和采集日志的服务器往往 ...

  5. 6，Stack

    一,Stack简介 Stack是栈.它的特性是:先进后出(FILO, First In Last Out). java工具包中的Stack是继承于Vector(矢量队列)的,由于Vector是通过数组 ...

  6. 求能粘贴Word 内容(含图片)的在线编辑器

    word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转 ...

  7. sqlserver连接-2

    本地连接 方法1. 方法2. 远程连接 如果无法通过IP地址远程连接你的SQL Server 2008服务器,可以参考下面的内容进行设置. 在进行下述设置之前,应该确保你的网络已经安装设置完毕,服务器 ...

  8. [CSP-S模拟测试]:chess（搜索+最短路）

    题目描述 $pig$在下象棋的时候特别喜欢用马,他总是计算着自己的马还需要几步才能吃掉对方的帅,以及方案数的个数,当然$pig$很笨,所以他只能求助于你.我们假设在$n\times m$的棋盘上,$p ...

  9. noi.ac #227 random

    分析 我们发现实际只要计算a[i]>b[j]和a[i]<b[j]哪种多即可 代码 #include<bits/stdc++.h> using namespace std; ], ...

  10. 《图解设计模式》读书笔记3-1 Singleton模式

    目录 单例模式 饿汉式 懒汉式 线程安全的懒汉式 单例模式 确保任何情况下都只有一个实例 饿汉式 public class Singleton { //在类被加载的时候运行一次,这是本类构造函数的唯一 ...