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, Dec 09 '13 at 10:49
either craete a [fiddle](http://jsfiddle.net) or post more codes including html and css — Amit Soni, Dec 09 '13 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, Dec 09 '13 at 11:01

score 3 · Accepted Answer · answered Dec 09 '13 at 10:43

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

jquery mouseover event firing twice

1 Answers1

Linked