CSS-03 queue方法

queue方法

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

队列

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

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

queue方法

　　queue（queueName，callback()）

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

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

例子一：

　结果显示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)'	
			})
		})