使高度变化和左移动同时，但是左移动用时3秒，高度变化用时1秒。并且可以控制高度变化在向左移动的动画的3秒开始时或中间或结束时开始。
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#panel").css("opacity", "0.5");//设置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 )
.fadeOut("slow");
});
});
</script>
</head>
<body>
<div id="panel"></div>
</body>
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#panel").css("opacity", "0.5");//设置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 )
.fadeOut("slow");
});
});
</script>
</head>
<body>
<div id="panel"></div>
</body>
$(function(){
$("#panel").css("opacity", "0.5");//设置不透明度
$("#panel").click(function(){
// $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 1000).animate({top: "200px" , width :"200px"}, 1000 ).fadeOut("slow");
//要求1
// $(this).animate({left: "100px", height:"200px" ,opacity: "1"}, 1000).animate({left: "400px",opacity: "1"}, 2000).animate({top: "200px" , width :"200px"}, 1000 ).fadeOut("slow");
//要求2
// $(this).animate({left: "150px" ,opacity: "1"}, 1000).animate({left: "250px", height:"200px" ,opacity: "1"}, 1000).animate({left: "400px",opacity: "1"}, 1000).animate({top: "200px" , width :"200px"}, 1000 ).fadeOut("slow");
//要求3
// $(this).animate({left: "300px",opacity: "1"}, 2000).animate({left: "400px", height:"200px" ,opacity: "1"}, 1000).animate({top: "200px" , width :"200px"}, 1000 ).fadeOut("slow");
});
});
</script>
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);queue Boolean(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)实现同时开始