jQuery的动画效果
<!DOCTYPE html>
<html>
<head>
<title>jQuery的动画效果</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background:#ccc;color: red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#bt1").click(function(){
// $('#box1').animate({left:'100px'},"slow");
$('#box1').animate({
height:'300px',
opacity:'0.6'
},1500);//先变高，颜色变淡
$('#box1').animate({
width:'300px',
opacity:'0.6'
},"slow");//再变宽
$('#box1').animate({
height:'100px',
opacity:'0.6'
},2000);//恢复为原来的高度
$('#box1').animate({
width:'100px',
opacity:'0.6'
},"slow");//恢复为原来的宽度
$('#box1').animate({
fontSize:'40px',
opacity:'1'
},1500);//字体变大，颜色恢复
});
$("#bt2").click(function(){
$("#box2").animate({
height:'+=50px',
width:'+=50px'
});
});
})
</script>
</head>
<body>
<button id="bt1">开始动画一</button><br>
<div id="box1">变大</div><br>
<button id="bt2">开始动画二</button><br>
<div id="box2"></div>
</body>
</html>1.animate()方法一次可以操作多个css属性，但是css的写法需要改变，比如padding-left要写成paddingLeft，font-size改为fontSize才行；
2.animate()方法可以使用规定效果的值，比如slow，fast等，也可以直接使用元素的当前值，比如直接+或者-具体的值；