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?

Answer 1

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