侧边导航条滑出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin: 0;padding: 0;}
ul{height: 350px;width: 150px;background: aliceblue;float: right;margin-top: 200px;margin-right: -120px;}
ul li{list-style: none;height: 33px;border-bottom:2px solid #FFFFFF;line-height: 33px;text-align: left;}
ul li span{background: blue;width: 30px;float: left;text-align: center;margin-right: 30px;color: #FFFFFF;}
</style>
<body>
<ul>
<li><span>1</span>html</li>
<li><span>2</span>java</li>
<li><span>3</span>jquery</li>
<li><span>4</span>javascript</li>
<li><span>5</span>css</li>
<li><span>6</span>html</li>
<li><span>7</span>java</li>
<li><span>8</span>jquery</li>
<li><span>9</span>javascript</li>
<li><span>10</span>css</li>
</ul>
</body>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
$(document).ready(function(){
$("ul").mouseover(function(){
$("ul").animate({marginRight:"0px"},1000)
})
})
</script>
</html>
老师请问下下 怎么实现那种波浪形的呀 鼠标滑过 每个li出来的顺序不一样