I am working on a function that makes an element blink continuously. However, when I move my mouse over the element, I want it to stop blinking and be fully visible (opacity 1). Once I move my mouse away, I want the blinking to resume.
Here is the code snippet for the function:
$(document).ready(function() {
function animatexyz() {
$('.xyz-ico a').animate({
opacity: '.5'
},1000).animate({
opacity: '.15'
},1000, animatexyz);
}
animatexyz();
}
In my CSS file, I have defined the styles for ".xyz-ico" and ".xyz-ico a", including setting the opacity to 0.15 and changing it to 1 upon hover.
While I tried using .hover and mouseover jQuery functions to handle the hover effect, it didn't work as expected. The loop in the animation seems to override the opacity value set during hover. Any suggestions on how I can fix this issue would be greatly appreciated.
Thank you for your help!