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. linux下caffe的命令运行脚本

    参考:https://www.cnblogs.com/denny402/p/5076285.html 首先编译: make -j8 make pycaffe 注:下面的--solver=.... 等价 ...

  2. HashMap的几种遍历方式（转载）

    今天讲解的主要是使用多种方式来实现遍历HashMap取出Key和value,首先在java中如果想让一个集合能够用for增强来实现迭代,那么此接口或类必须实现Iterable接口,那么Iterable ...

  3. Fckeditor实现WORD粘贴图片自动上传

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

  4. [CF846E]Chemistry in Berland题解

    这题乍一看是一道水树形DP(其实事实上它确实是树形DP),然后设f[i]表示第i个点所多余/需要的材料,然后我们愉快的列出了式子: if(f[v]<0) f[u] += f[v] * edges ...

  5. stack1顺序栈

    顺序栈 #include<iostream> using namespace std; #define increasesize 10 template <class Object& ...

  6. Jenkins slave-agent.jnlp运行无反应

    在配置Jenkins的Windows节点时候,点击slave-agent.jnlp选择javaws.exe运行无反应,cmd命令执行javaws slave-agent.jnlp也不行,slave-a ...

  7. vue组件传值之父传子

    1.父组件给子组件传值  home父组件  header子组件  关键字props home代码 <template> <div> <v-header :title=&q ...

  8. CSS3中哪些新属性—阴影、文本省略（1）

    CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...

  9. html、css、js分工，内核，html头，html表单

    html:内容css:样式js:交互 内核 浏览器控制台输入navigator.userAgent,回车显示出内核"Mozilla/5.0 (Windows NT 6.1; WOW64) A ...

  10. win7系统下安装Splash。

    参考地址:https://www.jianshu.com/p/4052926bc12c 期间遇到的问题: 关于virtualbox的问题: 启动虚拟机失败 http://www.cnblogs.com ...