在线运行代码 - 菜鸟教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(cainiaoplay.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
	$("#start").click(function(){
		var div = $("div");  
		div.animate({height:300},"slow");
		div.animate({width:300},"slow");
		div.queue(function () {
			div.css("background-color","red");  
			div.dequeue();
		});
		div.animate({height:100},"slow");
		div.animate({width:100},"slow");
	});
});
</script> 
</head>
<body>

<p>queue() 方法允许你创建一个队列功能区执行被选中的元素。 </p>
<p>dequeue() 方法顺序执行它们。 </p>
<p><button id="start">开始动画</button></p>
<div style="background:blue;height:100px;width:100px;">
</div>
 
</body>
</html>
源代码

动行结果
