how can I change js to have the same effect as the navigation slider in 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 = $("-sharpnav"),
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;
}
-sharpnav {
position: absolute;
top: 0;
right: 171px;
z-index: 4;
height: 60px;
background-color: -sharpfff;
overflow: hidden;
}
-sharpnav li {
float: left;
height: 100%;
-webkit-transition: background-color 700ms;
transition: background-color 700ms;
}
-sharpnav 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: -sharp666;
-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="-sharp">home</a>
</li>
<li class="wrap_menu1 more">
<a href="-sharp">link1</a>
</li>
<li class="wrap_menu1 more">
<a href="-sharp">link2</a>
</li>
<li class="wrap_menu1 more">
<a href="-sharp">link3</a>
</li>
<li class="wrap_menu1 more">
<a href="-sharp">link4</a>
</li>
</ul>
</div>
</body>
</html>