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. python3-filter

    Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是 ...

  2. windows cmd bat处理文件

    bat中输入: @echo offtitle 正在承载无线网络....netsh wlan start hostednetworknetsh wlan show hostednetworkecho 启 ...

  3. Js中window.location.href和window.location.replace的区别

    href相当于打开一个新页面,replace相当于替换当前页面:这里打开页面都是针对历史记录来说,在页面上看完全相同,只是浏览器的history表现不同如果在1.html中点击链接到2.html,然后 ...

  4. Python---基础---str

    #capitalize首字母大写,其余小写,返回字符串 ------------------------------ s = "i LOVE WangXiaoJing"print( ...

  5. 【leetcode】486. Predict the Winner

    题目如下: Given an array of scores that are non-negative integers. Player 1 picks one of the numbers fro ...

  6. 【HDOJ6693】Valentine's Day（概率）

    题意:给定n件物品,每件物品让周驿东开心的概率为a[i] 要求从中选一些,使得周驿东恰好开心一次的概率最大 n<=1e4,0<=a[i]<=1 思路: #include<bit ...

  7. 解决webpack打包vue项目后，部署完成后，刷新页面页面404

    1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...

  8. [CSP-S模拟测试]:reverse（数位DP）

    题目描述 我们定义: $\overline{d_k...d_2d_1}=\sum \limits_{i=1}^kd_i\times {10}^{i-1}=n(d_i\in [0,9]\ and\ d_ ...

  9. centos7systemctl介绍

     Linux中如何启动.重启.停止.重载服务以及检查服务(如 httpd.service)状态  # systemctl start httpd.service # systemctl restart ...

  10. spring boot中注册拦截器

    拦截器是动态拦截Action调用的对象.它提供了一种机制可以使开发者可以定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行,同时也提供了一种可以提取action中可重 ...