????:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>自定動畫</title> <script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定動畫</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.bt1').click(function(){
$('p').animate({fontSize:'40px'},1500)
})
$('.bt1').click(function(){
$('p').animate({fontSize:'14px'},1500)
})
$('.bt2').click(function(){
$('div').animate({
//left:'500px',
//opacity:'0.3', //多屬性直接加
height:'toggle' //預(yù)定義屬性
},1500)
})
})
</script>
<button class="bt1">點擊字體變化</button>
<P>animate()方法創(chuàng)建自定義動畫</P>
<button class="bt2">點擊移動div</button>
<div></div>
</body>
</html>
總結(jié):1.寫法:animate({屬性:'屬性值'})
2.opacity: '0.4' 屬性為透明度變化
3.width:'toggle' toggle預(yù)定義值