zoukankan      html  css  js  c++  java
  • CSS-03 queue方法

    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;
    			 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)'	
    			})
    		})
    

      

      

      

     

     

  • 相关阅读:
    外校培训前三节课知识集合纲要(我才不会告诉你我前两节只是单纯的忘了)
    floyd算法----牛栏
    bfs开始--马的遍历
    (DP 线性DP 递推) leetcode 64. Minimum Path Sum
    (DP 线性DP 递推) leetcode 63. Unique Paths II
    (DP 线性DP 递推) leetcode 62. Unique Paths
    (DP 背包) leetcode 198. House Robber
    (贪心 复习) leetcode 1007. Minimum Domino Rotations For Equal Row
    (贪心) leetcode 452. Minimum Number of Arrows to Burst Balloons
    (字符串 栈) leetcode 921. Minimum Add to Make Parentheses Valid
  • 原文地址:https://www.cnblogs.com/Helen-code/p/11982140.html
Copyright © 2011-2022 走看看