我想在每个 li 悬停时从左到右为 li 项目设置动画答案

【问题标题】：i want to animate li item like wave form left to right onhover of each li我想在每个 li 悬停时从左到右为 li 项目设置动画
【发布时间】：2014-04-12 06:57:04
【问题描述】：

    <!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添加动画 css 显示 li 项表单我创建了我的菜单项 CSS 添加动画 css 显示 li 项表单我创建了我的菜单项 CSS 添加动画 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);

        });
    });
});

【问题讨论】：

如果我第一次悬停它可以正常工作，但之后就无法正常工作

标签： jquery html css animation

【解决方案1】：

看来你只需要重置你的计时器变量：

$(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);

        });
    });
});

【讨论】：

感谢它现在工作正常，但我需要动画从我第一次悬停的 li 开始，例如，如果悬停第 4 li 动画应该从第 4 li 开始，但它总是从第一个 li 开始跨度>
为了清楚起见，您是否希望“波浪”仅动画下来？例如，如果您将鼠标悬停在 MenuElement4 上，那么您期望 4,5 和 6 来“挥手”？
动画就像下面链接中提供的视频
youtu.be/XB1UA45ZlO8 请帮帮我我尝试了很多我做不到我是 jquery 新手
我明白了。这涉及更多一点。您需要以不同的方式处理它。我不会为您编写代码，但我很乐意帮助您解决遇到的任何问题。