<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*****
animate(params,speed,callback);
(1),params:一个包含样式属性及值的映射比如{propertyp1:"value1",propertyp1:"value2"}
(2).speed,速度参数，可选
(3),callback,在动画完成时执行的函数，可选
*****/
/*1、
$(function() {
$("#panel").click(function() {
$(this).animate({left:"500px"},3000);
});
});
*/
// 2、 累加 ，累减
/*
$(function() {
$("#panel").click(function() {
$(this).animate({ left: "+=500px" }, 3000);//在当前位置累加到500px
});
});
*/
// 3、多重动画
/*
$(function() {
$("#panel").click(function() {
$(this).animate({ left: "+=500px",height:"200px"}, 3000); //向右滑动时放大元素的高度
}); //或： $(this).animate({ left: "+=500px"}, 3000);
$(this).animate({ height:"200px"}, 3000);
});
*/
/*
//4、综合动画
$(function() {
$("#panel").css("opacity", "0.5"); //设置不透明度
$("#panel").click(function() {
$(this).animate({ left: "+=500px", height: "200px", opacity: "1" }, 3000).animate({top:"200px",width:"200px"},300).fadeOut ("slow");
});
});
*/
//5、动画回调函数 ,想要在最后改变样式把fadeout（），改为css（）；并不能得到预期的效果而应该把css放到回调函数中
$(function () {
$("#panel").css("opacity", "0.5"); //设置不透明度
$("#panel").click(function () {
$(this).animate({ left: "+=500px", height: "200px", opacity: "1" }, 3000).animate({ top: "200px", width: "200px" }, 300, function () {
$(this).css("border", "5px solid blue");
})
});
});
</script>
<style type="text/css">
#panel
{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
</head>
<body>
<div id="panel">
</div>
</body>
</html>
