CSS-03 queue方法

queue方法

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

队列

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

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

queue方法

  queue(queueName,callback()

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

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

例子一:




	
	Document
	


 结果显示div元素当前队列有几个函数要执行,4,3,2,1,4,3,2,1......

 CSS-03 queue方法_第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方法)