*动画菜单
<style>
.ul{
/*float:right;*/
list-style: none;
height:200px
/*width: 100px;*/
border:1px solid red;
}
.ul li{
width: 50px;
margin-top: 10px;
background: green;
/*margin-right:-30px;*/
}
</style>
<body>
<ul class="ul">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(".ul").hover(
function(){
for (var i = 0; i < $("li").length; i++) {
$("li").eq(i).stop(true).animate({
marginLeft: 30
},500 * (i + 1));
}
},function() {
for (var i = 0; i < $("li").length; i++) {
$("li").eq(i).stop(true).animate({
marginLeft: 0
}, 500 * (i + 1));
}
})
</script>
运用jquery动画制作的动画菜单
