jq动画学习,特别是关于动画队列
http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.html 动画队列解释
animate
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
操作多个属性
使用相对值
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',//使用相对值
width:'+=150px',
opacity:'0.5',
},3000);
});
});
</script>
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
实例 2
下面的例子把 <div> 元素移动到右边，然后增加文本的字号：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
dequeue([queueName])
概述
从队列最前端移除一个队列函数，并执行他。
参数
[queueName]StringV1.2
队列名，默认为fx
什么意思呢？也就是说，当你使用一系列的动画效果(如hide，show)，这些动画函数都会被放进一个名为"fx"的队列中，
然后在以先进先出的方式执行队列中的函数，而非动画函数，比如上面例子中的appendTo函数，则是不会进入这个队列中，
并且先于动画函数的执行，也就是在"fx"先进先出，取出第一个函数之前，它就已经执行了
$('div').slideUp('slow').slideDown('slow').queue(function(next){
$('#object').css({"background":"red"});
next();//next();
}).hide('slow');
一是我把next()语句注释掉了，二是希望在变色以后再让方块隐藏起来。但是当你运行之后，发现在变色之后无法对方块执行隐藏。
要记住queue中的函数是回调函数呀，默认情况下只有动画队列执行完了，才会调用变色函数，既然动画队列都执行完了，哪里来的hide()?所以next()是保证在执行完这次队列后再次执行下一个动画函数
我曾经尝试过抛弃next参数而保留next()语句，这样的结果是能在现代浏览器(firefox,chrome之类)中运行，但无法在ie6中运行。所以，保留吧 。
next和next()是jquery1.4中才开始出现的，而在之前使用的是.dequeue()函数，如果要将这节的例子改为使用dequeue()，如下：
$('#object').slideUp('slow').slideDown('slow').queue(function(){
$('#object').css({"background":"red"});
$(this).dequeue();
});
jQuery 遍历 - queue() 方法
queue() 方法显示或操作在匹配元素上执行的函数队列。
.queue(queueName) queueName 可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
<style>div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:60px;
background:green; display:none; }
div.newcolor { background:blue; }
p { color:red; } </style>
<p>队列长度是：<span></span></p>
<div></div>
<script>
var div = $("div");
function runIt() {
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
div.hide("slow");
div.show(1200);
div.slideUp("normal", runIt);
}
function showIt() {
var n = div.queue("fx");
$("span").text( n.length );
setTimeout('showIt()', 100);
//setTimeout(showIt, 100);//不加引号的写法
}
runIt();
showIt();
</script>
<p>队列长度是：<span></span></p>
<div></div>
<script>
var div = $("div");
function runIt() {
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
div.hide("slow");
div.show(1200);
div.slideUp("normal", runIt);
}
function showIt() {
var n = div.queue("fx");
$("span").text( n.length );
setTimeout('showIt()', 100);
//setTimeout(showIt, 100);//不加引号的写法
}
runIt();
showIt();
</script>
setTimeout( )
setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method。
queue(element,[queueName])
概述
显示或操作在匹配元素上执行的函数队列
参数
element,[queueName]Element,StringV1.3
element:检查附加列队的DOM元素
queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
element,queueName,newQueue Element,String,Array V1.3
element:检查附加列队的DOM元素
queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
newQueue:替换当前函数列队内容的数组
element,queueName,callback()Element,StringV1.3
element:检查附加列队的DOM元素
queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
callback():要添加进队列的函数
示例
<script>$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").queue("fx", []);//跟$("div").queue("fx");
$("div").stop();
});</script>
$("div").queue("fx", []);跟$("div").queue("fx");的区别[]相当于替换了当前队列的内容，其实也是类似于[0]跟[1]之类的区别，[]或者[0]就是随点随停
返回值:jQueryclearQueue([queueName])
概述
清空对象上尚未执行的所有队列
如果不带参数，则默认清空的是动画队列。这跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。
参数
queueNameBooleanV1.4
含有队列名的字符串。默认是"Fx"，动画队列。
$("#stop").click(function(){
$("#box").clearQueue();
});
