我想让li项目像波形一样从左到右在每个li的悬停处动画

    <!Doctype html>
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="animation.js" type="text/javascript"></script>
    </head>
    <body>
        <ul class="svertical">
            <li><a>MenuElement1</a></li>
            <li><a>MenuElement2</a></li>
            <li><a>MenuElement3</a></li>
            <li><a>MenuElement4</a></li>
            <li><a>MenuElement5</a></li>
            <li><a>MenuElement6</a></li>        
        </ul>
    </body>
</html>`

'CSS添加动画我创建了我的菜单项scss来添加动画我创建了我的菜单项scss来添加动画CSS来显示li项，我创建了我的菜单项

ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)) no-repeat; /* background of menu */
margin:0px;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
position:absolute;
}
ul.svertical li{
text-align: left; /* right align menu links */
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
color: black;
border:1px solid;
border-radius:5px;
left:-110px;
}
animation.js
$(document).ready( function(){
    var timer = 0;
    $('.svertical li').hover( 
    function(){
        $(this).stop().animate({ left: "0px" }, 'fast');
        $('.svertical li').each(function (i){
            timer = (timer * .8 + 150);
            $(this).stop().animate({ left: "0px" }, timer);
        });
    },
    function(){
        $(this).stop().animate({ left: "-110px" }, 'fast');
        $('.svertical li').each(function (i){
            timer = (timer * .8 + 150);
            $(this).stop().animate({ left: "-110px" }, timer);
        });
    });
});

似乎你只需要重置你的计时器变量:

$(document).ready( function(){
    var timer = 0;
    $('.svertical li').hover( 
    function(){
        timer = 0; // Reset timer variable
        $(this).stop().animate({ left: "0px" }, 'fast');
        $('.svertical li').each(function (i){
            timer = (timer * .8 + 150);
            $(this).stop().animate({ left: "0px" }, timer);
        });
    },
    function(){
        $(this).stop().animate({ left: "-110px" }, 'fast');
        $('.svertical li').each(function (i){
            timer = (timer * .8 + 150);
            $(this).stop().animate({ left: "-110px" }, timer);
        });
    });
});

相关内容

最新更新

热门标签：