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. LeetCode--051--N皇后（java）-star

    n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回所有不同的 n 皇后问题的解决方案. 每一种解 ...

  2. 检查电脑链接的网络是否支持ipv6

    测试方法一:在浏览器地址栏输入网址“http://test-ipv6.com/”,在页面会给出您的ipv6网络测试结果 测试方法二:在浏览器地址栏输入网址“http://ipv6.jmu.edu.cn ...

  3. Python3解leetcode Min Cost Climbing Stairs

    问题描述: On a staircase, the i-th step has some non-negative cost cost[i]assigned (0 indexed). Once you ...

  4. 最最简单的spring mvc + Maven项目

    首先配置pom文件,只需要引用三个jar包文件即可: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi ...

  5. vue项目适应不同屏幕做的适配器

    一般宽度是1920的,但是有的电脑屏幕很窄,导致页面样式错乱,那么可以设置app.vue以及主页面里的样式宽度为1920px,超过了就auto. 如下: (app.vue) (home.vue) 原效 ...

  6. 2018 CCPC 吉林站 H Lovers || HDU 6562 (线段树哦)

    http://acm.hdu.edu.cn/showproblem.php?pid=6562 题意: q次操作 1.将第l~r个数的左边和和右边都加上一个数d, 使得这个数变成 dsiddsid的形式 ...

  7. ANTLR4将BF翻译成CPP

    实验环境: 操作系统:windows 10 JAVA:JDK 1.8 antlr:antlr-4.7.1-complete.jar IDE:IntelliJ IDEA 2017.2.7 实验目的: 实 ...

  8. science_action

    w import random import pprint import math import matplotlib.pyplot as plt def gen_random(magnify_=10 ...

  9. 测开之路六十：接口测试平台之common目录

    实现接口测试平台使用jsonpath进行取值来断言,效果: 访问页面: 调试功能:http://www.kuaidi100.com/query 保存功能 触发执行功能 查看报告功能 目录结构 comm ...

  10. 【大前端攻城狮之路·二】Javascript&QA⼯程师

    今天给大家分享的主题的是Javascript&QA⼯程师.看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还需要关心这些?但事实上呢,测试是前端开发非常重要的环节,也是迈 ...