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. 【学习】008 Socket网络编程

    课程目标 网络模型 TCP协议与UDP协议区别 Http协议底层实现原理. 什么是网络模型 网络编程的本质是两个设备之间的数据交换,当然,在计算机网络中,设备主要指计算机.数据传递本身没有多大的难度, ...

  2. JVM加载class文件原理

    装载的概念 所谓装载就是寻找一个类或是一个接口的二进制形式并用该二进制形式来构造代表这个类或是这个接口的class对象的过程. Java中类装载器装载类到虚拟机 在Java中,类装载器把一个类装入Ja ...

  3. Knative 实战：基于 Knative Serverless 技术实现天气服务

    提到天气预报服务,我们第一反应是很简单的一个服务啊,目前网上有大把的天气预报 API 可以直接使用,有必要去使用 Knative 搞一套吗?杀鸡用牛刀?先不要着急,我们先看一下实际的几个场景需求: 场 ...

  4. ckeditor如何能实现直接粘贴把图片上传到服务器中?

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  5. CKEDITOR无缝粘贴word

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  6. 影视感悟专题---1、B站-魔兽世界代理及其它乱七八糟

    影视感悟专题---1.B站-魔兽世界代理及其它乱七八糟 一.总结 一句话总结: 看过的东西都可以学下,这样既可以学习那些东西,都是对自己生活学习有帮助的,还可以弥补自己每天学的东西的不够 1.< ...

  7. SPOJ AEROLITE

    题目链接: http://www.spoj.com/problems/AEROLITE/en/ ---------------------------------------------------- ...

  8. EZOJ #385 排列

    分析 对于第一问我们直接从上到下枚举所有横边 每一次交换两边的列标号即可 对于第二问我们发现答案就是最终序列的逆序对数量 代码 #include<bits/stdc++.h> using ...

  9. java Json 技术记录

    1.Json-lib json-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包,包括commons-beanutils.jar,commons-c ...

  10. CentOS 7.3 安装MySQL 5.7并修改初始密码

    在CentOS 7.3 下安装MySQL 5.7并修改初始密码,Windows下安装MySQL 5.7 见 http://www.linuxidc.com/Linux/2017-11/148521.h ...