奇怪的動畫行爲

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)