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/这种作品

选择列表中每个元素的效果，一个接一个

1 个答案: