jquery mouseover event firing twice

Question

 $(function(){ $('#webs').mouseenter(function(){ $('#websitehov').fadeIn('slow'); }); $('#webs').mouseleave(function(){ $('#websitehov').fadeOut('slow'); }); });

I know there are a ton of questions on this but I've tried a number of them and still not working, I've tried different event handlers including .hover, .mouseover and .mouseenter. The image hover/hover out effect fires multiple times when it enters and whenever I move the mouse inside the image the two events start firing. I found one solution that stopped this :

(function(){ $('#webs').hover(function(){ $('#websitehov').fadeIn('slow') }, function() { }); });

but this only worked for the hover in and not for hover out because the empty function was the mouseout event handler, idk if you can override this?

tried and same result, still flashing multiple times and firing every time you move the mouse and continues to fire one more time once you leave the area code: $(function(){ $('#webs').hover(function(){ $('#websitehov').fadeIn('slow'); }, function(){ $('#websitehov').fadeOut('slow'); }); }); — jn025
– jn025, Commented Dec 9, 2013 at 10:49
either craete a fiddle or post more codes including html and css — Amit Soni
– Amit Soni, Commented Dec 9, 2013 at 10:58
i found the problem, the image that fires when hovering over the first image goes infront of the other image so they're fighting — jn025
– jn025, Commented Dec 9, 2013 at 11:01

Arun P Johny · Accepted Answer · 2013-12-09 10:43:56Z

The only possible problem I can see is that of animation queuing, clear the animation queue before addition another one

$(function () { $('#webs').hover(function () { $('#websitehov').stop(true, true).fadeIn('slow'); }, function () { $('#websitehov').stop(true, true).fadeOut('slow'); }); });

Demo: Fiddle

Collectives™ on Stack Overflow

jquery mouseover event firing twice

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related