我目前正在一个有几页的小网站上工作。主页上需要垂直菜单。这很容易。
我设法在垂直菜单上应用了我需要的悬停效果。它看起来像这样: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的新手技巧,我很难实现这一目标。 (我尝试并设法应用了一个类,但是以优雅的方式将效果定位并应用于多个元素让我很难过。)
如果有人能给我一个如何实现这一点的提示,那将是一个巨大的帮助!
答案 0 :(得分:0)
我没有时间继续尝试弄清楚如何实现它,但在这里你有一些提示:
setInterval每n毫秒执行一次函数。
当鼠标进入/离开选择器时,mousenter / mouseleave执行一个函数。
<ul class="list-wave">
<li class="wave-item"><a class="asdf" href="#">link1</a></li>
</ul>
不要使用'#'来命名一个类。