<!DOCTYPE html>
<html><head> <title></title> <style type="text/css"> .contianer{ position: relative; } .panel{ width: 200px; height: 200; background-color: #cfcfcf; position: absolute; } </style></head><body><div class="container"> <div class="panel">动画先向左移动400px和高伸长为200px，然后再向下移动200px和宽度伸长为200px，然后渐渐变淡不见</div></div> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> <script type="text/javascript"> $(function(){ $(".panel").css("opacity",0.9); $(".panel").click(function(event) { $(this).animate({left: "400px",height: "300px",opacity:"1"},3000) .animate({bottom: "200px",width: "300px"},3000) .fadeOut('slow', function() { alert("播放完毕"); }); }); }) </script></body></html>注意：
在使用animate()方法之前，为了能影响该元素的"top","bottom","left","right"的样式属性，必须先把元素的position样式设置为'relative'或‘absolute’;