摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>jQuery的动画效果--自定义动画</title>
<style type="text/css">
div{width: 200px;height: 200px;background:pink;position: absolute; color: #fff;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){ //页面加载完毕
$('.but1').click(function(){ //but1点击事件
$('p').animate({fontSize:'40px'},1500) //属性名称font-size 一律改成驼峰写法：fontSize
})
// $('.but2').click(function(){ //按钮2点击事件
// $('div').animate({ //创建自定义动画
// width:'toggle'
// },1500)
// })
$('#right').click(function(){ //id选择器right被点击
$('.box1').animate({left:'+500px'},3000) //执行右移500PX动画效果，延时3秒
$('.box1').animate({fontSize:'30px'},500) //执行改变字体大小效果，字号30，延时0.5秒
})
$('#stop').click(function(){ //id选择器STOP被点击
$('.box1').stop(true) //BOX1执行STOP函数
})
})
</script>
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="box1">你好哟</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-27 17:38:54
老师总结：jQuery有着强大的自定义动画的能力, 但是方法的参数 太多, 一定要配合手册
