javascript - 鼠标悬停/移出事件的奇怪动画行为

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)