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 id="main"> <div id="floatLeft" name="code">//例子一的封装 方法 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 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 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 );});?
?? 附件中是例子：
?