?
?
测试例子中的 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 );
});
?
?? 附件中是例子：
?