动画效果的导航
<!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>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
ul li{
width:50px;
background:brown;
color:#fff;
margin-bottom:10px;
list-style: none;
height:30px;
line-height:30px;
}
ul{
padding:0;
}
</style>
</head>
<body>
<div id="box" style="position:relative;width:200px;height:200px;background-color:blue;"></div>
<br>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
<script>
$('ul li').hover(function(){
$(this).animate({
width:'500px'
},500);
},function(){
$(this).animate({
width:'50px'
},500);
})
</script>
</body>
</html>通过JQ获取元素 然后添加事件执行的操作 animate的第一个参数是动画变更的内容，第二个参数是动画执行时间，第三参数是动画完毕后执行的代码。
stop()可以停止动画执行 stop第一个参数为布尔型 是否停止这个元素上当前的所有队列的动画，第二个参数布尔型 是否立即完成当前动画。