<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: blueviolet;
height: 100px;
width: 100px;
position: relative;
}
#div2{
background-color: blue;
height: 50px;
width: 50px;
position: relative;
}
#div3{
background-color:yellowgreen;
height: 100px;
width: 100px;
position: relative;
}
</style>
</head>
<body>
<button type="button" id="btn1">click</button>
<button type="button" id="btn2">Animate Queue</button>
<div id="div1">div1</div>
<div id="div2"></div>
<p>停止效果</p>
<button type="button" id="btn3">Start</button>
<button type="button" id="btn4">Stop</button>
<button type="button" id="btn5">Stop ALL</button>
<button type="button" id="btn6">Stop AND Finish</button>
<div id="div3">DIVDIVDIV</div>
<p>CallBack</p>
<p id="p1">this is p</p>
<button type="button" id="btn7">Click</button>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="JQ_animate.js"></script>
</body>
</html>
//动画效果 $(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性。
//使用 Camel 标记法书写所有的属性名，
//比如，必须使用 paddingLeft 而不是 padding-left
//默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
//如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").animate({
left:"250px",
opacity:'0.5',
height:'+=150px',
width:'150px',
//生成颜色动画需要下载 Color Animations
backgroundColor:"red"
},"slow");
$("#div2").animate({
// 预定义的值 toggle slow fast
height:'toggle',
},"slow");
});
$("#btn2").click(function(){
var div=$("#div1");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
})
/**
* $(selector).stop(stopAll,goToEnd);
* stopAll 参数规定是否应该清除动画队列
* goToEnd 参数规定是否立即完成当前动画
*/
$("#btn3").click(function(){
var div=$("#div3");
div.animate({left:"250px",opacity:'0.4'},5000);
div.animate({fontSize:"3em"},5000);
})
$("#btn4").click(function(){
$("#div3").stop();
});
$("#btn5").click(function(){
$("#div3").stop(true);
});
$("#btn6").click(function(){
$("#div3").stop(true,true);
});
/**
* Callback 当hide结束后再alert
*/
$("#btn7").click(function(){
$("#p1").hide("slow",function(){
alert("p1 has hiden");
});
})
});
