悬停事件在jQuery中触发两次(在进入和离开时)？

Question

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

我将此效果应用于我的菜单,因此当鼠标越过链接时,它会显示此淡入淡出效果,但当鼠标从中释放时,效果会再次播放.不应该.它应该只在鼠标悬停在链接上时播放一次,而不是在鼠标外出时播放.

Answer 1

.hover()有两个回调,一个用于mouseenter,一个用于mouseleave.

你可能会更好mouseenter:

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

Answer 2

尝试使用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