newman newman - 6 months ago 28
Javascript Question

li .sibling .fadeTo issue with jQuery

I am having issues with getting the siblings of my footer navbar to fade their opacity when $(this) is hovered over. I tried to do this with jQuery, and it works...but not very smoothly. If you hover the mouse from icon to icon they start blinking and flashing in a manner that I don't want them to.

There must be a smoother and easier way to do this that works....

To better explain, here is a jSfiddle I did with the problem:

https://jsfiddle.net/h48ay6es/

And here is my source code for the jQuery I have:

$(document).ready(function() {
$('.footerLinks li').hover(
function() {
$(this).siblings().fadeTo(500, 0.4)
},
function() {
$(this).siblings().fadeTo(500, 1.0)
}
)
});

Answer

Use .stop():

$(document).ready(function() {
  $('.footerLinks li').hover(
    function() {
      $(this).siblings().stop().fadeTo(500, 0.4)
    },
    function() {
      $(this).siblings().stop().fadeTo(500, 1.0)
    }
  )
});

jsFiddle example

Comments