摘要：animate() 方法创建自定义动画语法：$('选择器').animate({params},speed,fn);必需：params参数定义形成动画的css属性！可选：speed参数规定效果的时长。它可以取以下值：slow、fast或毫秒！可选的 fn是动画完成后所执行的函数！例：$(function(){ &nb
animate() 方法创建自定义动画
语法：
$('选择器').animate({params},speed,fn);
必需：params参数定义形成动画的css属性！
可选：speed参数规定效果的时长。它可以取以下值：slow、fast或毫秒！
可选的 fn是动画完成后所执行的函数！
例：$(function(){
$('#but1').click(function(){
$('p').animate({fontSize:'40px'},1500) /属性名称一律用驼峰写法
})
})
可以使用预定义的值：show hide toggle
总结：可以同时操作多个css属性！属性之间逗号隔开！属性值要写在引号内。使用预定义的值就是把预定义的值当做属性的值来使用！
stop()方法用于停止动画或效果，在它们完成之前 该方法适用于所有jQuery效果函数，包括滑动、淡出淡入和自定义动画！
语法：
$('选择器').stop(stopAll,goToEnd)
可选参数 stopAll 规定是否应该清除动画队列。默认是false仅停止活动的动画，允许任何任何排入队列的动画向后执行！
可选参数goToEnd 规定是否立即完成当前动画。默认是false
默认情况下 stop() 会清除在被选元素上指定的当前动画！
<!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">
<title>自定义动画</title>
<script src="/jQuery/jQuery-3.3.1.js"></script>
<script>
$(function(){
$('a').click(function(){
$('a').animate({fontSize:'20px'})
});
$('a').hover(
function(){
$('a').css('color','red')
},
function(){
$('a').hide()
}
)
})
</script>
<style>
*{margin: 0px;padding: 0px;}
.cont{height: 50px;background: #ccc;}
.nav{width: 50%;height: 50px;margin: 0px auto;}
ul li{list-style: none;}
ul li a{color:#fff; text-decoration: none; float: left; height: 50px;text-align: center;line-height: 50px;padding-right: 30px;}
</style>
</head>
<body>
<div class="cont">
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">互联网</a></li>
</ul>
</div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-13 13:45:07
老师总结：很多人使用jQuery,就是喜欢上了他的动画 , 实在是功能强大,而操作又是这么的简单,加油
