*动画菜单

 

<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动画制作的动画菜单
版权声明：本文为alicezq原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/alicezq/p/4967096.html