Currently, I am in the process of developing a small website with multiple pages. The main requirement for this project is to have a vertical menu on the home page. Implementing the menu was relatively easy.
I successfully added a hover effect to the vertical menu, and you can see how it looks by visiting this link: https://jsfiddle.net/Kelowna/nfa2h65r/
Here is the markup:
<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>
The script responsible for the hover effect is shown below:
$( 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)
})
})
In my current stage of development, I am now looking to automate this same effect to run continuously in a loop but stop when the user hovers over the menu. As a novice in JQuery, I am facing some challenges achieving this. Although I managed to apply a class, targeting and implementing the effect across multiple elements has proven difficult for me.
If anyone could provide me with guidance on how to accomplish this task, it would be greatly appreciated!