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

      

      

      

     

     

  • 相关阅读:
    巡风安装配置 -windows
    Struts2-052 RCE CVE-2017-9805
    CVE-2017-12615和CVE-2017-12616
    Nmap使用指南
    理解HTTP协议
    缓慢拒绝服务攻击- slowloris.pl
    SSL&TLS渗透测试
    Nmap版本检测
    Protocol Buffer学习教程之编译器与类文件(三)
    64位Windows系统下32位应用程序连接MySql
  • 原文地址:https://www.cnblogs.com/Helen-code/p/11982140.html
Copyright © 2011-2022 走看看