有点抽象！！自做备份
queue("Fx"); 默认为Fx：标准一个队列长度！
Html代码
<!DOCTYPE html>
<html>
<head>
<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>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button >Show Length of Queue</button>
<p></p>
<div></div>
<script>$("#show").click(function () {
var n = $("div").queue("fx");
$("p").text("Queue length is: " + n.length);
});
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);
}
runIt();</script>
</body>
</html>
下面3中解析
Html代码
<!DOCTYPE html>
<html>
<head>
<style>div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; } </style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
//
$("button").click(function () {
$("div").animate({left:'+=200px'}, 2000); // 1
$("div").animate({top:'0px'}, 600); //2
$("div").queue(function () { //3
$(this).toggleClass("red"); //3.1
$.dequeue(this);
});
$("div").animate({left:'10px', top:'30px'}, 700); //4
});
})
</script>
</head>
<body>
<button>Start</button> <div ></div>
</body>
</html>
测试一下这个demo，大家会发现执行顺序是1，2，3，4完全符合逻辑！
但是为什么加了一个queue和dequeue，如果不加会出现什么情况，于是3这个函数删掉，3.1放到3的位置上，
Js代码
$(function(){
//
$("button").click(function () {
$("div").animate({left:'+=200px'}, 2000); // 1
$("div").animate({top:'0px'}, 600); //2
$(this).toggleClass("red"); //3.1
$("div").animate({left:'10px', top:'30px'}, 700); //4
});
})
执行！！貌似1和3.1同时执行了，加入断点调试发现没有啊！！但怎么刚开始就变色了，犹豫小弟我没怎么写过动画样式，百思不得其解！后来发现犹豫1中这个动画函数，因为这个函数执行的速度有时间，jquery对动画时间有处理，但对逻辑上的应该是分离！所以执行2000的时候3.1已经执行了