Hover event fires twice (on enter and leave) in jQuery?

Question

$(document).ready(function(){
    $("#menu a").hover(function(){
        $(this).animate({opacity: 0.25}, function(){
            $(this).animate({opacity: 1});
        });
    });
});

I applied this effect to my menu, so when the mouse goes over the link it shows this fade effect, but when the mouse is released from it, the effect plays again. It shouldnt. It should only play once when the mouse is over the link, not another time when the mouse is out.

Answer 1

.hover() has two callbacks, one for mouseenter and one for mouseleave.

You're probably better off with mouseenter:

$(document).ready(function(){
    $("#menu a").mouseenter(function() {
        $(this).animate({opacity: 0.25}, function(){
            $(this).animate({opacity: 1});
        });
    });
});

Answer 2

try this with jQuery v1.7

$('#menu a').on({
    mouseover: function() {
        event.preventDefault();
        $(this).animate({opacity: 0.25});
    },
    mouseout: function() {
        event.preventDefault();
        $(this).animate({opacity: 1});
    }
});

working DEMO

Answer 3

try this. add $(this).stop() on hoverout event

   $(document).ready(function () {
            $("#menu a").hover(function () {
                $(this).animate({ opacity: 0.25 }, function () {
                    $(this).animate({ opacity: 1 });
                });
            }, function () { $(this).stop(); });
        });