鼠标悬停/退出事件的奇怪动画行为

Question

我有两件事：

$('li').on({
    'mouseover':fadeImgOut,
    'mouseout' :fadeImgIn
});

和功能......

function fadeImgOut() {
    $(this).find('img').animate({opacity:'.5'}, 1000);
}
function fadeImgIn() {
    $(this).find('img').animate({opacity:'1'}, 1000);
}

当我将鼠标悬停在其上时，图片fadeout, fadein and fadeout以及当我将鼠标移出时，图像fadein, fadeout and fadein会再次出现。

我无法解释这种行为：为什么图片不会在mouseover上淡出并在mouseout上逐渐消失？

Answer 1

使用

$('li').on({
    'mouseenter':fadeImgOut,
    'mouseleave' :fadeImgIn
});

或更好

$('li').hover(fadeImgOut, fadeImgIn)