jquery 动画处理1-queue使用

 

 

测试例子中的 css

 

	<script src="../../jquery-1.7.2.js"></script>
	 <style type="text/css">
	 	body{
	 		padding:0px;
	 		margin:0px;
	 	}
	 	body div{
	 		border:1px solid black;
	 	}
	 	.main{
	 		width:100%;
	 		float:left;
	 		margin:2px 0px;
	 	}
	 	.main .floatLeft{
	 		width:200px;
	 		height:100px;
	 		float:left;
	 		background-color: yellow;
	 	}
	 	.main .floatRight{
	 		width:200px;
	 		height:100px;
	 		float:left;
	 	}
	 	
	 	.main .btn_move{
	 		float:left;
	 		margin:4px 10px;
	 	}
	 </style>

 

实例1 有很多时候需要动画处理中夹杂着 位置变化等等，这时候通常我们会将动画函数和位置变化等函数连接到一起使用，这时候我们得到的动画并不是我们想要的 

例子  ： 一个div在两个div中切换 ，

      正确结果： 想实现的结果 第一次单击 movediv 左边隐藏  转移到右边 然后显示出来  ，

      错误结果：可是 结果却是  div 先转到右侧然后  执行隐藏，然后显示  

      出现错误结果原因：//jquery 默认将动画函数放到 queue中名字是fx ，其他的normal（例如：appendTo）函数不放在queue中  并且会在queue之前执行。

 

 

   

<!--例子1  动画测试1
	正确结果： 想实现的结果 第一次单击 movediv 左边隐藏  转移到右边 然后显示出来  ，
	错误结果：可是 结果却是  div 先转到右侧然后  执行隐藏，然后显示  
	原因：jquery 默认将动画函数放到 queue中名字是fx ，其他的normal（例如：appendTo）函数不放在queue中
		 并且会在queue之前执行。
	解决：将appendTo放到queue中 注意queue中必须是使用dequeue ，这样后面的动画才能继续播放
	-->
<div class="main" id="main">
 	<div id="floatLeft" class="floatLeft">
 		<div id="moveDiv">float Left div </div>
 	</div>
 	<div class="btn_move"><button id="move">move</button></div> 
 	<div id="floatRight" class="floatRight">
 	</div>
</div>

 

 

	//例子一的封装   方法 
	 function Animal1(){
	 	//例子1    错误实现
		this.wrongExample = function (){
			$('#move').toggle(function(){
				$('#moveDiv').hide('slow').appendTo('#floatRight').show('slow');	 
			},function(){
				$('#moveDiv').hide('slow').appendTo('#floatLeft').show('slow');
			});
		}
		
		//例子1正确实现  queue使用 
		this.rightExample = function (){
			$('#move').toggle(function(){
				$('#moveDiv').hide('slow').queue(function(){
					$(this).appendTo('#floatRight');
					jQuery.dequeue( this ); //
				}).show('slow');	 
			},function(){
				$('#moveDiv').hide('slow').queue(function(){
					$(this).appendTo('#floatLeft');
					jQuery.dequeue(this);
				}).show('slow');
			});
		}
	}

	var  animal1 = new Animal1();
	//animal1.rightExample();  //这个是使用queue的，动画会按照正常的效果展示
	//animal1.wrongExample();   //这个是未使用queue的，动画顺序错误 ，会先执行appendTo 然后在执行其他动画。

 

 

  实例2 可以用动画的回调函数来代替queue ，调整动画执行顺序、

  

<!--  动画测试2 
	 queue div   隐藏 - 变色  -  显示  -->
<div class="main" id="main2" >
	<div id="changeDiv" style="width:100px;height:100px;background-color:purple; ">
		div slide up  and down animal 	
	</div>
</div>

 

  

	//回调函数  queue两种实现方式 
	function Animal2(){
		 //用queue 执行 
	 	this. example2Queue = function(){
		 	 
			$('#changeDiv').slideUp('slow').queue(function(){
				$(this).css('background-color','red');
				jQuery.dequeue(this);
			}).slideDown('slow');;
	 	}

		//用callback执行 
	 	this. example3Callback = function(){
		 	 
			$('#changeDiv').slideUp('slow',function(){
				$(this).css('background-color','green');
				jQuery.dequeue(this);
			}).slideDown('slow');;
	 	}
	}

	var animal2 = new Animal2();
	//animal2.example2Queue();
	//animal2.example3Callback();

 

 实例3 自定义queue使用 

 

  

<!--  自定义 queue 实现动画 -->
<div class="main" id="main3" >
	<div id="changeDiv3" style="width:100px;height:100px;background-color:purple; ">
		div slide up  and  costum queue
	</div>
</div>

 

   

	// 自定义  queue 实现 ；
	function Animal3(){
		 // 要使queue 执行      最后面的    dequeue必须有 
	 	this.exampleCusQueue = function(){
			$('#changeDiv3').queue('customQueue',function(){
				//alert('already excute');
				$(this).css('background-color','#999900');
				jQuery.dequeue(this);
			}).dequeue('customQueue');
	 	}
 
	}

	var animal3 = new Animal3();
	animal3.exampleCusQueue();

 

实例4  解决不同阶段，动画效果不同

      物体整体以40px移动，但前1s透明效果不变，后1s逐渐透

      下面例子中  changeDiv4 是将动画分成两部分执行的

       动画 changeDiv5是自定义queue        1）整个过程物体移动以40px速度  2）自定义queue透明效果，但延迟1s执行

 

   

 <!--   complax animal result    -->
 <div id="changeDiv4" style="width:100px;height:100px;background-color:purple; position: absolute;top: 600px;left: 500px">
		 auto move1
 </div>
 <!--   complax animal result    -->
 <div id="changeDiv5" style="width:100px;height:100px;background-color: #CCFF00; position: absolute;top: 600px;left: 700px">
		 auto move1
 </div>

 

	// 动画 前1秒 只是位置变化， 后一秒位置和透明度变化 
	$('#changeDiv4').animate({top:'-=20'}, {duration: 1000}).animate({opacity: 0, top: "-=20"}, {duration: 1000});
	// 用queue 和delay 处理 两段不同动画 
	//注意  queue: false 标识这个队列中的动画不加入到默认的队列中，加入这个参数则两个动画可以同时执行 ，即在移动的同时 透明 度变化
	$('#changeDiv5').delay(1000,'move').queue('move',function(){
		$(this).animate({opacity:0},{duration:1000,queue: false});
	}).dequeue('move').animate({top:"-=20"},{duration:2000} );
	
	//$("#changeDiv4").animate({opacity: 0, top: "-=40"}, {duration: 2000});

 

 实例5    1） 创建一个循环执行的动画    2）计算queue中未执行动画的个数 

 

    相应的html代码段

 <!--  it will be run always     -->
 <div id="changeDiv6"  style="width:100px;height:100px;background-color:#FFCC00; position: absolute;top: 400px;left: 200px">
		 click me and i can count the animate 
 </div>

 

   循环执行的动画

	//回调函数写自己  则这个动画一直在运行  
	function runAniItSelf(){
		$('#changeDiv6').slideToggle('slow')
						.slideToggle('3000')
						.animate({left:"+=200px"},{duration:3000})
						.hide('3000')
						.show('3000')
						.animate({left:"-=200px"},3000,'swing',runAniItSelf );
	}
	runAniItSelf();

   添加单击事件来计算queue中未执行动画的个数 

	$('#changeDiv6').click(function(){
		var $queue=$("#changeDiv6").queue('fx'); //得到queue 
		var $length=$('#changeDiv6').queue('fx').length;
		alert( $length );
	});

 

   附件中是例子：