jquery - 一个接一个地选择列表中的每个元素的效果

Question

我目前正在开发一个只有几页的小型网站。主页上需要垂直菜单。这是简单的部分。

我设法在垂直菜单上应用了我需要的悬停效果。它看起来像这样:https://jsfiddle.net/Kelowna/nfa2h65r/

标记:

    <ul class="list-wave">
        <li class="wave-item"><a class="#" href="#">link1</a></li>
        <li class="wave-item"><a class="#" href="#">link2</a></li>
        <li class="wave-item"><a class="#" href="#">link3</a></li>
        <li class="wave-item"><a class="#" href="#">link4</a></li>
        <li class="wave-item"><a class="#" href="#">link5</a></li>
        <li class="wave-item"><a class="#" href="#">link6</a></li>
      </ul>

运行效果的脚本:

    $( document ).ready(function() {
$('.list-wave').find('li > a').each(function(){
    $(this).hover( function(){
        $(this).stop().animate({'opacity': '1'}, 300)
        $(this).parents('.wave-item').prevAll().eq(1).children().stop().animate({'opacity': '0.4'}, 300)
        $(this).parents('.wave-item').nextAll().eq(1).children().stop().animate({'opacity': '0.4'}, 300)
        $(this).parents('.wave-item').prev().children().stop().animate({'opacity': '0.6'}, 300)
        $(this).parents('.wave-item').next().children().stop().animate({'opacity': '0.6'}, 300)

}, function() {
     $(this).stop().animate({'opacity': '0.3'}, 300)
     $(this).parents('.wave-item').prevAll().eq(1).children().stop().animate({'opacity': '0.3'}, 300)
     $(this).parents('.wave-item').nextAll().eq(1).children().stop().animate({'opacity': '0.3'}, 300)
     $(this).parents('.wave-item').prev().children().stop().animate({'opacity': '0.3'}, 300)
     $(this).parents('.wave-item').next().children().stop().animate({'opacity': '0.3'}, 300)
})
})

});

我现在需要的是具有完全相同的效果，但会自动循环运行并在我将鼠标悬停在菜单上时停止。由于我的 JQuery 新手技能，我很难实现这一目标。 (我尝试并成功地应用了一个类，但是以一种优雅的方式将效果定位并应用到多个元素让我遇到了困难)。

如果有人能给我一个关于如何实现这一目标的提示，那将是一个巨大的帮助!

Answer 1

我没有时间继续尝试弄清楚如何实现它，但这里有一些提示:

setInterval每 n 毫秒执行一个函数。

mousenter/mouseleave当鼠标进入/离开选择器时执行一个函数。

<ul class="list-wave">
    <li class="wave-item"><a class="asdf" href="#">link1</a></li>
</ul>

不要使用“#”来命名类。

https://jsfiddle.net/nfa2h65r/3/这有点管用