请问要怎么改js才能像http://www.vanke.com/ 里面的导航滑块效果一样
<!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="./js/jquery.min.js"></script>
<script>
$(function () { var nav = $("#nav"),
link = nav.children(),
linkon = link.filter(':not(.more)'),
linkoff = link.filter('.more');
link.hover(function () {
$(link).removeClass("wrap_menu1_2");
$(this).addClass("wrap_menu1_2");
},
$("nav").mouseleave(function () {
$("linkon").addClass("wrap_menu1_2")
}));
}); </script>
<style>
ul li{ list-style:none;
} #nav { position: absolute; top: 0; right: 171px; z-index: 4; height: 60px; background-color: #fff; overflow: hidden;
}
#nav li { float: left; height: 100%; -webkit-transition: background-color 700ms; transition: background-color 700ms;
}
#nav li a { position: relative; z-index: 2; display: block; width: 100%; height: 100%; font-weight: bold; padding:15px 10px; font-size: 13px; line-height: 79px; text-align: center; color: #666; -webkit-transition: color 200ms; transition: color 200ms;
}
.wrap_menu1_2 { background: red;
} </style>
</head>
<body>
<div class="nav-box">
<ul id="nav">
<li class="wrap_menu1 wrap_menu1_2">
<a href="#">home</a>
</li>
<li class="wrap_menu1 more">
<a href="#">link1</a>
</li>
<li class="wrap_menu1 more">
<a href="#">link2</a>
</li>
<li class="wrap_menu1 more">
<a href="#">link3</a>
</li>
<li class="wrap_menu1 more">
<a href="#">link4</a>
</li>
</ul>
</div>
</body>
</html>