<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
a{
color:#333;
text-decoration:none;
}
.clearfix{
zoom:1;
}
.clearfix:after{
content:".";
display:block;
width:0;
height:0;
visibility:hidden;
clear:both;
}
.menu{
position:relative;
height:30px;
line-height:30px;
width:412px;
margin:20px auto;
background:#000;
overflow:hidden;
}
.menu ul{
position:relative;
}
.menu li{
float:left;
height:100%;
}
.menu li a{
display:block;
padding:0 18px;
color:#fff;
font-size:14px;
}
.box{
height:100%;
position:absolute;
top:0;
left:0;
width:64px;
background:deeppink;
overflow:visible;
-webkit-filter: blur(0px);
}
.box .left,.box .right{
width:0;
height:100%;
position:absolute;
top:0;
border-radius:50%;
-webkit-border-radius:50%;
}
.box .left{
left:0;
background:deeppink;
}
.box .right{
right:0;
background:#000;
}
.box.active .left{
background: #000000;
}
.box.active .right{
background: deeppink;
}
</style>
</head>
<body>
<div class="menu">
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<ul class="clearfix">
<li ind="1"><a href="javascript:void(0);">首页</a></li>
<li ind="2"><a href="javascript:void(0);">课程</a></li>
<li ind="3"><a href="javascript:void(0);">视频</a></li>
<li ind="4"><a href="javascript:void(0);">问答</a></li>
<li ind="5"><a href="javascript:void(0);">会员</a></li>
<li ind="6"><a href="javascript:void(0);">联系方式</a></li>
</ul>
</div>
</body>
<script src="../jquery-1.11.3.min.js"></script>
<script>
var lastIndex=0;
$(".menu li").hover(function(){
var $this=$(this),
$index=$this.index(),
$width=$this.width(),
num= 0,timer1,flag=$index;
for(var i=0;i<$index;i++){
num+=$this.siblings().eq(i).width();
}
var f=1;
if(lastIndex>$index){//向左
f=-1;
}else{//向右
f=1;
}
var i = Math.abs($index-lastIndex);
lastIndex = $index;
clearTimeout(timer1);
timer1=window.setTimeout(function(){
$(".box").css({width:$width}).animate({left:num},100*i).delay(10);
if(f>0){//向右
$(".box").addClass("active");
}else{
$(".box").removeClass("active");
}
$(".left").animate({width:"30",left:"-15px"},100*i).animate({width:0,left:0},20);
$(".right").animate({width:"30px",right:"-15px"},100*i).animate({width:0,right:0},20);
},100);
},function(){
})
</script>
</html>
