=======可以自定义动画效果的方法animate()==========
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#d1{width:100px;height:100px;position:absolute;background-color:lightgreen;left:10px;top:40px;filter:alpha(opacity=0);}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
// 自定义动画函数 参数:设置样式 达到效果的事件 "不知道" 动画执行完要做的事情
// 先执行非动画 如设置样式,若想让样式最后执行,要把设置的样式放到最后一个参数function()中
$("#d1").animate({ "left": "300", "top": "300", "width": "200", "height": "200" }, 4000).animate({ "left": 800, "top": "50", "width": "100", "height": "140" }, 5000, function () {
$("#d1").css("display", "none");
});
});
// 向左
$("#btn2").click(function () {
$("#d1").animate({"left":"-=80"},1000);
});
// 向右
$("#btn3").click(function () {
$("#d1").animate({ "left": "+=80" }, 1000);
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="动画" />
<input id="btn2" type="button" value="向左" />
<input id="btn3" type="button" value="向右" />
<div id="d1">
</div>
</body>
</html>