摘要：<!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,
height:'toggle',
width:'400px'
},1500)
})
})
</script>
<button>点击字体放大</button>
<button>点击字体放大</button>
<p>JQuery中我们使用animate()方法创建自定义的动画</p>
<div></div>
</body>
</html>
