<!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>