摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery</title> <script type="text/javascript" src="jq
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'400px',opacity:'0.5'},'slow');
div.animate({width:'400px',opacity:'1'},'slow');
div.animate({height:'200px',opacity:'0.5'},'slow');
div.animate({width:'200px',opacity:'1'},'slow',function(){
var span=$("span");
span.text("PHP中文网");
span.animate({fontSize: '20px',opacity:'0.1'},'show');
span.animate({
lineHeight:'200px',
fontSize:'40px',
opacity:'1'}
,'show');
});
})
})
</script>
</head>
<body>
<button style="width: 200px;height: 50px;border: none">点击</button>
<div style="width: 200px;height: 200px;background: green;position: absolute;"><span style="position: relative;"></span></div>
</body>
</html>1，JQuery动画的语法
$("div").animate({params},speed,fn)用animate() 方法创建自定义动画；
params是需要修改的css属性；
speed是速度，可以使用'0~1'之间的数字，或者使用slow，fast;
fn是动画完成后所执行的函数function();
2,JQuery animate操作多个属性
var span=$("span") //申明span为$("span")
span.animate({
lineHeight:'200px',
fontSize:'40px',
opacity:'1'}
,'show');大括号{}内css属性，属性名需要去除-，改-后面首字母为大写字母，每个属性需要用,英文逗号隔开
3，JQuery animate的队列功能
var div=$("div");//申明
div.animate({height:'400px',opacity:'0.5'},'slow');
div.animate({width:'400px',opacity:'1'},'slow');
div.animate({height:'200px',opacity:'0.5'},'slow');JQuery逐一运行调用animate;
注意：如需对位置进行操作，需要修改css的position属性为absolute，relative。
