鼠標懸停時動畫寬度不起作用

Question

$(".menuicon").mouseenter(function() { 
    $(this).animate({ 
     width: '100px' 
    }, 300); 
}); 

$(".menuicon").mouseover(function() { 
    $(this).animate({ 
     width: '36px' 
    }, 300); 
}); 

鼠標懸停時圖標的寬度更改爲100px，但很快會回到36px，鼠標仍然懸停在其上。

Answer 1

您需要使用mouseleave事件，不mouseover：

$(".menuicon").mouseleave(function() { 
    $(this).stop(true).animate({ 
     width: '36px' 
    }, 300); 
}); 

或者更好的是，結合整個事情用hover：

$(".menuicon").hover(
    function() { $(this).stop(true).animate({ width: '100px' }, 300); }, 
    function() { $(this).stop(true).animate({ width: '36px' }, 300); } 
); 

Answer 2

使用mouseleave()代替mouseover()一樣，

$(".menuicon").mouseleave(function() { 
    $(this).animate({ 
     width: '36px' 
    }, 300); 
}); 

或者嘗試hover()一樣，

$(".menuicon").hover(function() { 
    $(this).animate({ 
     width: '100px' 
    }, 300); 
},function() { 
    $(this).animate({ 
     width: '36px' 
    }, 300); 
}); 

Answer 3

$(".menuicon").hover(function() { 
    $(this).animate({ 
     width: '100px' 
    }, 300); 
},function() { 
    $(this).animate({ 
     width: '36px' 
    }, 300); 
});