自定义简单的动画
<!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’;
