HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="jquery.js"></script>
<link href="" rel="stylesheet">
</head>
<style type="text/css">
.nav {
width:200px;
position: fixed;
right:0px;
top:50%;
}
.nav a{
width:200px;
height:40px;
line-height: 40px;
background: orange;
display: block;
text-align: left;
text-indent: 10px;
right:-160px;
color:#fff;
position: relative;
}
.nav a:nth-of-type(odd){
background:#cecece;
}
</style>
<body>
<div class="nav">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
</div>
</body>
</html>
JQUERY
<script type="text/javascript">
var _nav = $('.nav');
var _temp;
_nav.hover(function(){
$nav = $(this);
_temp = setTimeout(function(){
$nav.find('a').each(function(i){//每个都执行相同的函数，如果没有延迟settimeout就没有延迟效果
var $a = $(this);
setTimeout(function(){
$a.animate({'right':0},200)
},50*i)//关键
})
},100);//其实这个函数可以不要，只是为了平缓过渡吧
},function(){
if(_temp){clearTimeout(_temp)};
$nav = $(this);
_temp = setTimeout(function(){
$nav.children('a').each(function(i){
var $a = $(this);
setTimeout(function(){
$a.animate({'right':'-160'},200)
},50*i)
})
},100);
})
</script>