abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ动画效果</title> <script type="text/javascript" src="jquer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ动画效果</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
.box{position: absolute;width: 100px;height: 200px;background: red}
</style>
</head>
<body>
<script type="text/javascript">
// JQuery中我们使用animate()方法创建自定义的动画
// 语法：$(selector).animate({params},speed,fn);
// 必需的 params 参数定义形成动画的css属性
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow,fast"或者毫秒
// 可选的 fn是动画完成后所执行的函数
// stop()方法用于停止动画或者效果，在它们完成之前 该方法适用于所有JQuery 效果函数，包括滑动，淡入淡出和自定义动画
// 语法：$(selector).stop(stopAll,goToEnd)
// 可选参数 stopAll 规定是否应该清除动画队列。默认是false 仅停止活动的动画，允许任何排入队列的动画向后执行
// 可选参数goToEnd 规定是否立即完成当前动画。默认是false
// 默认情况下 stop() 会清除在被选元素上指定的当前动画
$(function(){
$('.btn1').click(function(){
$('p').animate({fontSize:'30px',color:'red'},1500)
})
$('.btn2').click(function(){
$('.box').animate({
left:'200px',
background:'blue',
opacity:0.6,
width:'400px',
height:'toggle'
},1500)
})
$('#right').click(function(){
$('.box').animate({left:'+=300px'},3000)
$('.box').animate({fontSize:'+=10px'},800)
})
$('#stop').click(function(){
$('.box').stop(true,true)
})
})
</script>
<button>点击字体放大</button>
<button>点击字体放大</button>
<button id="stop">停止</button>
<button id="right">右移</button>
<p>JQuery中我们使用animate()方法创建自定义的动画</p>
<div>PHP中文网</div>
</body>
</html>
Correcting teacher：灭绝师太Correction time：2018-10-29 17:31:58
Teacher's summary：美滋滋，棒