サマリー：<!DOCTYPE html> <html> <head> <title>jQuery的動畫效果</title> <meta charset="utf-8"> <script type="text/javasc
<!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);//恢復(fù)為原來的高度
$('#box1').animate({
width:'100px',
opacity:'0.6'
},"slow");//恢復(fù)為原來的寬度
$('#box1').animate({
fontSize:'40px',
opacity:'1'
},1500);//字體變大，顏色恢復(fù)
});
$("#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()方法可以使用規(guī)定效果的值，比如slow，fast等，也可以直接使用元素的當前值，比如直接+或者-具體的值；